Tag Archives: various

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.

Blog added to Webdesignz

Hello all. I don’t know how often I will be posting on this blog as it was created mainly to test myself if I can integrate  a wordpress blog into a site keeping the theme of the rest of the site. And most probably I will be rambling about the difficulties I encounter during design, applying scripts etc.. and how (if…) I overcame them.

Small notice… don’t expect to be impressed…