Category Archives: various

clamshell smartphone 2016

Studio 2525

Studio 2525 seems to have designed and developed a very out of this world smartphone. Flip screen, flexible touch monitor and all packaged in a modern and cool design? Definitely something to be looking forward to….

Time for a redesign

As new trends in design come, old ones go, new features become available, old ones are deemed … well… old… so, it was time for a redesign. I think I am sattisified with the result, I know, it is not everyone’s cup of tea. My wife told me that the bottom part of the homepage, where the most recent posts and the contact form wait for someone to notice them, seems chaotic in her eyes. Most probably she is right, but… I don’t know… I like it. As a nice oldie say “It’s my party and I’ll cry if I like to…”, so, it is my website and I will do with it whatever I want :D.

If I come up with a different idea about that part I will change it, but for now… I am happy with it. I hope you like it as well!!

Show posts from Google+, Facebook, Twitter and Instagram in your WordPress blog

There are various tutorials on how to connect your WordPress blog with social media, so that a blog post is automatically posted in your facebook, google plus, etc… accounts. But what happens if you want to do the opposite? That is, whenever you write something in facebook or other social platforms, these posts display themselves automatically to your wordpress blog? Again! Various plugins available, nothing new here…

The reason for this post was a special requrest of a client of mine. She wanted to show in a widget area a list of the most recent posts from these 3 social platforms (fb, twitter and google plus). The number of posts shown should always be 5 (the most recent ones) regardless from the source. So if the most recent posts all came from facebook, then in the widget area we will show only facebook posts. If among these 5, we have 2 facebook posts, 2 google plus posts and one twitter post, then respectively we will show these posts accordingly.

WordPress comes by default with a show most recent posts widget that can also limit the number of posts (title of posts) shown, so this is the one we will use. Now we must find a way to import the posts from the social media and convert them to wordpress posts. In this way, the widget will be able to always show the most recent posts regardless from their source as they will have been converted to wordpress posts…

How to do that? The plugin FeedWordPress is our friend. What does it do? It reads rss feeds and converts the feeds to posts. There is an option to link the created posts to their original source (the corresponding social media platform in our case) or to keep them purely as wordpress posts. Other optios such as automatic update of the imported posts and other nice things are also available (the scope of this article is not FeedWordPress plugin).

So, now what remains is to find the rss url for each of the social media accounts…

 

RSS for Facebook

https://www.facebook.com/feeds/page.php?id=XXXXXXXXXXXXXXX&format=rss20

Replaxe your id with the id of your facebook page.

 

RSS for Twitter

http://blog.fogcat.co.uk/2013/01/17/creating-an-rss-feed-for-your-twitter-home-page/

Use this link, and follow the guidelines. You will need ftp access to your site to upload the necessary files and it is not so straightforward as with fetching rss for facebook, but it is a very stable system and worth your time. There are other sites such as http://twitrss.me/ but for some reason FeedWordPress site doesn’t like the resulting feed and displays errors :S.

 

RSS for Google +

Not so straightforward as well (again the FeedWordPress plugin is very picky with the rss feed it is going to use…). What I did for Google+ was first to create an rss feed with Magenta River. It has a totally free plan which you can use. Unfortunately, the rss feed it produces doesn’t work with the plugin in wordpress. The solution is to take the resulting rss url that Magenta River creates and use it to create a new rss feed with Google Feedburner. Use the rss url of Magenta with Google Feedburner and you are set. For Google + there is also this one http://gplusrss.com/ but my experience with it wasn’t the best. The resulting rss was working for one day and then it was throwing errors. As I am writing this article their site is down so I don’t know… if you want to try it go for it (the resulting rss feed url from it was working directly without any conversions, but it stopped for me…). Maybe you have more luck or they upgraded their system.

The final step of course is to use the final rss urls for each social platform with the FeedWordPress plugin.  While I was searching for the correct way to create rss feeds for the social platforms I found out that 2-3 years back it was far easier to get an rss from facebook, google+ etc.. It seems like that the trend is to keep the visitors within their own platforms and make it difficult to export the posts to other platforms (such as wordpress).

 

RSS for Instagram

http://widget.websta.me/rss/n/username

Use this link, and replace the “username” with your own instagram name. Copy this url and paste it like for RSS for Google+ in the Google Feedburner. The resulting rss url is the one you want to use with FeedWordPress plugin.

internet explorer stylesheet conditionals make your page dissapear

Why not? That’s logical, isn’t it?

No, relax. I am not sure if this is a general problem or it happened only to me. But of course where there is a problem, there is a solution.

In my case, I was modifying an existing wordpress theme for a client and the homepage design required some explicit design. All worked well until tested in IE7. Layout broken… well, let’s fix them with ie specific stylesheets… but, fixing it made the page dissapear… Great fix Zisi…

What was the problem in my case? Further above inside the <head> tag, there was another IE conditional, exactly the same as  I used to fix my broken layout. The theme was using it for its own purposes. Luckily I got the idea to put the IE specific stylesheet inside this first IE conditional, thus removing the second conditional.

Confused? Long story short…. if there is for example already a IE conditional statement, for example <!–[if lt IE 8]> …. <![endif]–>, don’t use again exactly the same conditional to import your IE specific stylesheet. Place it inside the already existing conditional.

Maybe someone else who is heavily modifying existing wordpress themes will find this useful. Maybe not. Either way, knowledge shared :).

CSS3 submenu not appearing in iphone and ipad

So, I was working on a website and decided to implement a submenu which would become visible when the user hovers or activates a link in the main menu, using only css, no scripts.

The structure of the menu is a simple ul list and the one of the submenu a nested ul list. Below is just the code of the <li> containing the link “more” which reveals the submenu:


.
.
.
<li id="moreli"><a id="link-more" href="">More</a>
<ul id="submenu">
<li><a id="link-updates" href="blog/">Updates</a></li>
<li>...</li>
<li>...</li>
</ul>
</li>
.
.
.

Notice that the href of the link “more” is blank. I left it blank because I didn’t want to load any page with this particular link, its purpose is to bring up the submenu. Also I didn’t put inside just “#” as I wanted to avoid the reload  of the same page for design purposes.

I tested this structure on my windows pc in 5 browsers (including safari), everything works great. On my android smartphone.. perfect. But my client, who has an iphone tells me “look, Zisis, the site looks wonderful, but the submenu doesn’t come up”.

Great!!

The point was that the iphone didn’t recognize the “more” link with its completely empty href as a normal link, so after clicking on it, it didn’t call up the necessary changes to the css for the submenu to appear. Putting a # inside the href would solve the problem but as mentioned before, I didn’t want the page to reload….

Luckily, very luckily, there is a workaround for this problem which makes the link behave as a link, but also it doesn’t reload the page. What’s the solution?

Just put javascript: inside the empty href. That makes the menu with its submenu look like this…


.
.
.
<li id="moreli"><a id="link-more" href="javascript:">More</a>
<ul id="submenu">
<li><a id="link-updates" href="blog/">Updates</a></li>
<li>...</li>
<li>...</li>
</ul>
</li>
.
.
.

Simple, effective, perfect. Tested on iphone and ipad.

Site renovation

As of today the site has completely new looks.  The old style was nice, I still like it. However, it could be considered as amateurish… What do I mean? “I have learned a bunch of new tricks and I am applying them all together”.

This version of the style may be also amateurish… but not so much. I am growing through the work I do for other people, and each project leaves, except of sattisfied “clients”, new knowledge for me (and hear plays the typical background military music). I look now at my favicon, the small image you notice at the left, inside the tab that contains the title of the page you are currently in. In photoshop, it looked cool. Now, its tiny version doesn’t… It still needs some work. Thanks for trusting me :).

Zisis

Dreamweaver CS5.5 and validation of a checkbox and a dropdown menu in a form

It is true that the form validator of dreamweaver is very helpful in adding a simple validation for each of its elements, unfortunately it is limited in textboxes or textareas. So if you want to validate let’s say a checkbox, to see if it is checked or not, then your only solution is to program it yourself (if you have such a knowledge) or search in the web for help.

Today I wanted to validate such a checkbox and a dropdown menu (if anything is selected). For the checkbox, I was lucky enough to find the help from this URL: http://www.justskins.com/forums/checkbox-validation-97769.html.

After some editing from my part, I managed to make it work for my case, and here is the code for validating a checkbox, (and any text boxes). Btw, “form1” is the name and id of my form, “agree” is the name and id of my checkbox:

<script type="text/javascript"> function MM_validateForm() { //v4.0 if(document.forms["form1"].elements["agree"].checked){ getherrors=''; } else{ getherrors='- please read the disclaimer and confirm'; }
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if ((errors) || (getherrors))
alert("The following error(s) occurred:\n"+errors+getherrors);
document.MM_returnValue = ((errors == '') && (getherrors == ''));
}
</script>

Now, if you want to validate a dropdown menu too, this code becomes like this. Again, “form1” is the name and id of my form, “agree” is the name and id of my checkbox and “country” is the name of my dropdown. Its first value (the default one) is set to ” “:

<script type="text/javascript">
function MM_validateForm() { //v4.0
if(document.forms["form1"].elements["agree"].checked){
getherrors='';
}
else{ getherrors='- please read the disclaimer and confirm'; }
if(document.forms["form1"].elements["country"].value!=""){
getherrors2='';
}
else{ getherrors2='- please select your country'; }
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if ((errors) || (getherrors) || (getherrors2))
alert("The following error(s) occurred:\n"+errors+getherrors+"\n"+getherrors2);
document.MM_returnValue = ((errors == '') && (getherrors == '') && (getherrors2 == ''));
}
</script>

I am sure that there are better solutions somewhere, but if it works, it’s ok with me :). Thanks again to Getho from the above mentioned URL for providing the initial code.

Opacity fix in Cloud Carousel rear images

Cloud Carousel is a cool way to present images online, I wonder why it isn’t used more often. Anyway, tastes differ but that’s not the topic of this post. First of all congratulations to Professor Cloud who created this wonderful script. You can find his page here: http://www.professorcloud.com.

However, as “absolutely flawless” doesn’t exist in this universe, and one reason for this is because tastes differ…, my girlfriend suggested that perhaps it would look better if the rear images had less opacity than the front ones. I liked her criticism and because I am not a programmer myself (I am learning though..), after viewing the code and had no clue what to add inside it, I turned to google and voila…. the solution:

Inside the cloud-carousel script file one can find the line:

h = img.height = item.orgHeight * scale;

directly below it add the line:

$(img).css({'opacity':scale * scale * 1.2});

And it works perfectly. Cudos go to http://stackoverflow.com/questions/8172335/opacity-into-cloud-carousel. Simple and quick.