rootKID Posted December 4, 2014 Share Posted December 4, 2014 Hello W3S Well i did post my menu thing in the CSS but that part is fixed now. Now i have another problem jQuery/Javascript related. What i wish is to make a drop-down menu in the mobile AND a slidedown in the normal PC version when a mouse is over the menu. I have started with the Menu at the moment, but not doing well. This is my JS file: $('span.nav-btn').click(function() { $('ul.nav').slideToggle("fast");}) and this is my HTML: <?php/*THIS PROJECT USES 960GRID SYSTEM!==================================*/ob_start();session_start();# Database Settings & Setuprequire_once("database/db.core.php");# Functions Libraryrequire_once("includes/functions.php");?><!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/smoothmenu.js"></script><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body><?phpecho "<div class='container'>"; // Sixteen Columns (Banner AND Logo, Userlogin, Menu) echo "<div class='sixteen columns'>"; // Banner AND Logo echo "<div class='ten columns half-bottom home_banner'>"; echo "Banner/Logo"; echo "</div>"; // Banner AND Logo // LinkedIN Login echo "<div class='five columns half-bottom userlogin_top'>"; echo "<a href='#'>Bruger Login</a>"; echo "</div>"; // LinkedIN Login // Menu echo "<div class='sixteen columns half-bottom navigation'>"; echo "<span class='nav-btn'></span>"; echo "<ul class='nav'>"; // Forside echo "<li><a href='index.php'>Forside</a></li>"; // Job Søgere echo "<li><a href='#'>For Jobsøgere</a>"; echo "<ul>"; echo "<li><a href='#'>Uopfordret ansøgning</a></li>"; echo "<li><a href='#'>Emnebank</a></li>"; echo "</ul>"; echo "</li>"; // For Virksomheder echo "<li><a href='#'>For Virksomheder</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for jer</a></li>"; echo "<li><a href='#'>Rekruttering og udvælgse</a></li>"; echo "<li><a href='#'>Headhunnting</a></li>"; echo "<li><a href='#'>Personlighedstest</a></li>"; echo "<li><a href='#'>Referencer</a></li>"; echo "</ul>"; echo "</li>"; // Ledige Stillinger echo "<li><a href='#'>Ledige Stillinger</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for dig</a></li>"; echo "</ul>"; echo "</li>"; // Kontakt echo "<li><a href='#'>Kontakt</a>"; echo "<ul>"; echo "<li><a href='#'>Om RightMatch</a></li>"; echo "<li><a href='#'>Mission & Vision</a></li>"; echo "<li><a href='#'>Nyt og artikler</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>"; echo "</div>"; // Menu echo "</div>"; // Eight Columns (News Blog) echo "<div class='eleven columns half-bottom home_news'>"; echo "Sidste Nyheder"; echo "</div>"; // Eight Columns (Something) echo "<div class='five columns half-bottom home_feed'>"; echo "LinkedIN Feed"; echo "</div>"; // Sixteen Columns (Footer, Admin Login) echo "<div class='sixteen columns'>"; echo "<div>"; echo "© Copyright 2014 / ".date("Y")." | <a href='http://www.rightmatch.dk' target='_blank'>www.rightmatch.dk</a>"; echo "</div>"; echo "<div>"; echo "<a href='#'>Admin Login</a>"; echo "</div>"; echo "</div>"; echo "</div>";?></body></html> And in case you wish my CSS: body { margin-top: 10px; }.home_banner { height: 70px; background-color: #F1F1F1; }.userlogin_top { height: 70px; } .userlogin_top a { margin-left: 100px; line-height: 70px; text-decoration: none; }.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*# Navigation / Main==================================================*/.navigation { height: 40px; background-color: #333f4f; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;} ul.nav {} ul.nav ul { display: none; } ul.nav > li { position: relative; float: left; } ul.nav > li > a { display: block; padding: 0 20px; color: #FFFFFF; text-transform: uppercase; font-size: 1.083em; font-family: "Oswald"; line-height: 40px; text-decoration: none; } ul.nav > li:hover > a, ul.nav > li:active > a { -webkit-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); -moz-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); background-color: rgba(51,63,79,.09); color: #8E5452; } ul.nav li:hover:first-child a, ul.nav li:active:first-child a { -webkit-border-radius: 0 0 0 7px; -moz-border-radius:0 0 0 7px; border-radius:0 0 0 7px; } /*# Navigation / Sub-Menu==================================================*/ul.nav li:hover > ul { display: block; left: 0; background-color: #333f4f;} /*ul.nav li ul li { width: 150px; }*//*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) { .userlogin_top { height: 70px; } .userlogin_top a { margin-left: 70px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) { /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) { .userlogin_top { height: 60px; } .userlogin_top a { margin-left: 170px; line-height: 60px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) { .userlogin_top { height: 50px; } .userlogin_top a { margin-left: 110px; line-height: 50px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }} Now this is a design still in the process, but bottom line is that whenever i have a table/mobile view (all other designs that is higher than 960px width), then as you see in my CSS media query i have made a simple ":before" to make the "Menu" appear. Here comes my problem, i followed a simple JS tutorial on youtube on how to make a responsive navigation-menu and it dosen't work whenever i click on the menu. I wonder if anyone can see where the error is? Because not sure where to look to be honest... hoping someone can help me out where i can't help myself hehe Thanks in advance! Regards, rootKID. Link to comment Share on other sites More sharing options...
Ingolme Posted December 4, 2014 Share Posted December 4, 2014 You should try running that Javascript after the page has finished loading. Be sure to check your browser's Javascript console for error messages. I imagine it says something like this: Unable to find property "click" on undefined. Link to comment Share on other sites More sharing options...
rootKID Posted December 4, 2014 Author Share Posted December 4, 2014 Well now it works! Thanks haha... one question tho, why? I don't get it... It should be able to work at the meta tag right Oo? And another thing, what about the jQuery part? Should that be in the <meta> also? Or at the bottom? Thanks ALOT again! Been trying to figure this one out for 2 days now -.-'... And weird thing is, i didn't get any errors that i could see in the console, so don't think i have any x) Thanks anyways x) Link to comment Share on other sites More sharing options...
justsomeguy Posted December 4, 2014 Share Posted December 4, 2014 Scripts that you put in the head section (or really all scripts anywhere) are executed as soon as the browser reaches that point in the HTML. That means that scripts in the head section will be executed before the body section has been created, so none of the elements exist at that point. You can link to a script file in the bottom of the body section and that will be fine because the elements will have already been created by the time the browser gets to the script. And another thing, what about the jQuery part? Should that be in the <meta> also? Or at the bottom?Meta tags have nothing to do with Javascript files. If you want to know where to put a piece of code then ask yourself what the code is doing. If it needs to work with elements then the code needs to run after the elements are loaded. The other way to do that is to put the code in the head section and use an onload handler so that it will only run after the page finishes loading. Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2014 Share Posted December 4, 2014 The issue is that the DOM needs to load first, in order for event handlers to be able to bind to the elements they're intended for. If you assign an event handler before that element has loaded, well you found what happens. A best practice is to always wrap init code in a window.onload / DOMContentLoaded event, or with jQuery, by using .ready() http://api.jquery.com/ready/ Although you _could_ solve this by loading all JS at the bottom of the page, the real advantage with that practice is that it allows the browser to load the page into view without have to wait for any JS to load (which will block page loading). Link to comment Share on other sites More sharing options...
Ingolme Posted December 4, 2014 Share Posted December 4, 2014 The issue is that the DOM needs to load first, in order for event handlers to be able to bind to the elements they're intended for. If you assign an event handler before that element has loaded, well you found what happens. A best practice is to always wrap init code in a window.onload / DOMContentLoaded event, or with jQuery, by using .ready() http://api.jquery.com/ready/ Although you _could_ solve this by loading all JS at the bottom of the page, the real advantage with that practice is that it allows the browser to load the page into view without have to wait for any JS to load (which will block page loading). The best practice is to put all the code at the bottom of the page, including the jQuery library. The reason is simple: The jQuery library takes time to load, while it's loading the rest of the page is not loading. If the jQuery is at the top then the page will appear blank until the jQuery library loads. It might not seem like a big deal on a fast connection, but on slower connections it means a lot. Statistics indicate that if a person hasn't seen what they wanted on a page in seven seconds they'll leave the site, so having it load quickly is important. Link to comment Share on other sites More sharing options...
rootKID Posted December 5, 2014 Author Share Posted December 5, 2014 Ok thanks alot! Helps on the understanding! Now i have one question left, which dosen't makes sence to me in a way. Whenever i click the "Menu" at the mobile view, my menu dosen't appear Oo? I mean it does... but the items are not loaded, almost like the design is being taken away for some reason? This is the image of the website: Ideas? Oo? This is my HTML + CSS and JS CSS: body { margin-top: 10px; }.home_banner { height: 70px; background-color: #F1F1F1; }.userlogin_top { height: 70px; } .userlogin_top a { margin-left: 100px; line-height: 70px; text-decoration: none; }.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*# Navigation / Main==================================================*/.navigation { height: 40px; background-color: #333f4f; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;} ul.nav {} ul.nav ul { display: none; } ul.nav > li { position: relative; float: left; } ul.nav > li > a { display: block; padding: 0 20px; color: #FFFFFF; text-transform: uppercase; font-size: 1.083em; font-family: "Oswald"; line-height: 40px; text-decoration: none; } ul.nav > li:hover > a, ul.nav > li:active > a { -webkit-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); -moz-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); background-color: rgba(51,63,79,.09); color: #8E5452; } ul.nav li:hover:first-child a, ul.nav li:active:first-child a { -webkit-border-radius: 0 0 0 7px; -moz-border-radius:0 0 0 7px; border-radius:0 0 0 7px; } /*# Navigation / Sub-Menu==================================================*//* Showing the Sub-Menu */ul.nav li:hover > ul { display: block; }/* Making sure there is not space between Main and Sub-Menu */ul.nav ul { margin: 0 0 0 0; }/* If position "absolute" i can define custom width etc without errors! */ul.nav ul { position: absolute; left: -15px; right: -15px; padding: 10px 0 10px 0; background-color: #333f4f;}ul.nav li ul li a { display: block; text-align: center; /*color: #FEFEFE; -> only if JS is activated with color fading script like U232!*/}ul.nav li ul li > a { color: #F15B19 !important; text-decoration: none; }ul.nav li ul li:hover { -webkit-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); -moz-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); background-color: rgba(0,0,0,.15);} /*ul.nav li ul li:hover > a {}*//*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) { .userlogin_top { height: 70px; } .userlogin_top a { margin-left: 70px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) { /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) { .userlogin_top { height: 60px; } .userlogin_top a { margin-left: 170px; line-height: 60px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) { .userlogin_top { height: 50px; } .userlogin_top a { margin-left: 110px; line-height: 50px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }} HTML: <?php/*THIS PROJECT USES 960GRID SYSTEM!==================================*/ob_start();session_start();# Database Settings & Setuprequire_once("database/db.core.php");# Functions Libraryrequire_once("includes/functions.php");?><!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><script type="text/javascript" src="js/jquery.js"></script><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body><?phpecho "<div class='container'>"; // Sixteen Columns (Banner AND Logo, Userlogin, Menu) echo "<div class='sixteen columns'>"; // Banner AND Logo echo "<div class='ten columns half-bottom home_banner'>"; echo "Banner/Logo"; echo "</div>"; // Banner AND Logo // LinkedIN Login echo "<div class='five columns half-bottom userlogin_top'>"; echo "<a href='#'>LinkedIN Login</a>"; echo "</div>"; // LinkedIN Login // Menu echo "<div class='sixteen columns half-bottom navigation'>"; echo "<span class='nav-btn'></span>"; echo "<ul class='nav'>"; // Forside echo "<li><a href='index.php'>Forside</a></li>"; // Job Søgere echo "<li><a href='#'>For Jobsøgere</a>"; echo "<ul>"; echo "<li><a href='#'>Uopfordret ansøgning</a></li>"; echo "<li><a href='#'>Emnebank</a></li>"; echo "</ul>"; echo "</li>"; // For Virksomheder echo "<li><a href='#'>For Virksomheder</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for jer</a></li>"; echo "<li><a href='#'>Rekruttering og udvælgse</a></li>"; echo "<li><a href='#'>Headhunnting</a></li>"; echo "<li><a href='#'>Personlighedstest</a></li>"; echo "<li><a href='#'>Referencer</a></li>"; echo "</ul>"; echo "</li>"; // Ledige Stillinger echo "<li><a href='#'>Ledige Stillinger</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for dig</a></li>"; echo "</ul>"; echo "</li>"; // Kontakt echo "<li><a href='#'>Kontakt</a>"; echo "<ul>"; echo "<li><a href='#'>Om RightMatch</a></li>"; echo "<li><a href='#'>Mission & Vision</a></li>"; echo "<li><a href='#'>Nyt og artikler</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>"; echo "</div>"; // Menu echo "</div>"; // Eight Columns (News Blog) echo "<div class='eleven columns half-bottom home_news'>"; echo "Sidste Nyheder"; echo "</div>"; // Eight Columns (Something) echo "<div class='five columns half-bottom home_feed'>"; echo "LinkedIN Feed"; echo "</div>"; // Sixteen Columns (Footer, Admin Login) echo "<div class='sixteen columns'>"; echo "<div>"; echo "© Copyright 2014 / ".date("Y")." | <a href='http://www.rightmatch.dk' target='_blank'>www.rightmatch.dk</a>"; echo "</div>"; echo "<div>"; echo "<a href='#'>Admin Login</a>"; echo "</div>"; echo "</div>"; echo "</div>";// JavaScript Loaded Hereecho "<script type='text/javascript' src='js/smoothmenu.js'></script>";?></body></html> JS: $('span.nav-btn').click(function() { $('ul.nav').slideToggle("fast");})$(window).resize(function() { // if "BIGGER" than 600px if ( $(window).width() > 600 ) { $('ul.nav').removeAttr('style'); }}) Hope you can spot it, i can't Oo? Link to comment Share on other sites More sharing options...
Ingolme Posted December 5, 2014 Share Posted December 5, 2014 You don't really need to echo all those things out, just leave the HTML outside the <?php ?> block and it will be on the page automatically. Your code will be much more readable and you'll be saving the PHP engine a few instructions. I don't think that removing the style attribute from the element will remove the style property from the DOM. But what is the reason you're removing it in the first place? Link to comment Share on other sites More sharing options...
rootKID Posted December 5, 2014 Author Share Posted December 5, 2014 (edited) It was just really to keep my code in the background clean from the style attribute, why? Is that the thing that gives me error? Oo?... EDIT Lol i misunderstood your question, i added it because whenever my browser returns to the full PC size, all the menu items has for some reason been erased, basically just like my problem now, in the menu whenever i scroll down my items aren't there... Edited December 5, 2014 by rootKID Link to comment Share on other sites More sharing options...
Ingolme Posted December 5, 2014 Share Posted December 5, 2014 It's probably not giving an error, but I don't think it's doing anything at all. What did you intend when you wrote that code? If you explain your motives I can tell you what would be a better option. It would be ideal if I could see a working page. Check your browser's Javascript console in the developer tools and see what error messages you're getting. As for why your menu items are invisible, perhaps the text is the same color as the background. Check the styles you have applied to the elements. Link to comment Share on other sites More sharing options...
rootKID Posted December 5, 2014 Author Share Posted December 5, 2014 lol, it wasn't the color... it was "visibility" in the CSS, stupid me hehe... i only needed display: none About what my intensions are, those are simple. Whenever my screen size for tablet,mobile etc are under 960px width, it will show the clickable menu for people around the world not having trouble with the view of the website. And if bigger or equal to 960px width, it will then show a normal dropdown menu, which works without any problems The reason i remove the style attribute whenever the window size width is bigger than 900 (or so), that is for the normal PC/Laptop menu to work properly without any problems. If i dont the menu will have problem being viewed by people that uses the normal PC/Laptop view of the website. Hope this clears stuff up a big? ... another question that is actually related, now my idea for the mobile/tablet view if to first show the main-menu items whenever the "Menu" has been clicked, and then i wish to make another clickable item, in which case would be the main menu item for that item to show it's sub-menu items. My question is, would it be possible to make another just like now in the JS? If i select the "ul.nav li" to be clickable and then show all the "ul li" within that specific drop? What are your suggestions? Kind of in a hurry, hope you can help me hehe Thanks again! Link to comment Share on other sites More sharing options...
Ingolme Posted December 5, 2014 Share Posted December 5, 2014 I think the functionality you're describing is an accordion menu. As for this: $('ul.nav').removeAttr('style'); I really doubt it's actually doing anything useful. You should look into addClass() and removeClass(). The way the code currently is, as soon as the window is wider than 600px the style attribute is removed, but you never put the style back, so it will stay like that even if you resize it back down to under 600px. You should have an else statement that does something else if the window is not wider than 600px. Another thing you probably would want to do is to have that same function run once as soon as the page has loaded. If you don't, then nothing will happen until the user resizes the window and they might not always do that. Link to comment Share on other sites More sharing options...
rootKID Posted December 5, 2014 Author Share Posted December 5, 2014 how do you suggest i run the same function as soon the page is being loaded Oo? Link to comment Share on other sites More sharing options...
Ingolme Posted December 5, 2014 Share Posted December 5, 2014 Like this: function doSomething() { // Do something}$(document).ready(doSomething);$(window).resize(doSomething); Link to comment Share on other sites More sharing options...
rootKID Posted December 8, 2014 Author Share Posted December 8, 2014 so what you are saying is that i could make the if/else statement INSIDE the resize part and say that if bigger than 600px, remove attribute, else add the attribute back to the ul.nav? That is how i understand it anyways.. sorry, JS is not my best side hehe, trying to push myself into it ^^' Link to comment Share on other sites More sharing options...
Ingolme Posted December 8, 2014 Share Posted December 8, 2014 You need the if() statement inside the function, because if you don't put it there it will happen only once and it won't change after resizing. During the resize event you can add or remove classes. The class should exist in your CSS stylesheet. function resized(e) { if(window).width() > 600) { $('ul.nav').removeClass("small-screens"); } else if(!$('ul.nav').hasClass("small-screens")) { $('ul.nav').addClass("small-screens"); }} Looking at it, I don't think you need Javascript at all. Just use media queries: ul.nav { /* Styles for large screens */}@media screen and (max-width: 600px) { ul.nav { /* styles for small screens */ }} Link to comment Share on other sites More sharing options...
rootKID Posted December 8, 2014 Author Share Posted December 8, 2014 i already use Media Queries. But if i dont use JS for my "menu" and to make it clickable, the users with normal phones/tablets/etc can't use the website, that im aware off... and how am i supposed to show the "sub menus" at the small design etc? Not sure how... unless you have any suggestions? This is my CSS: /*# Navigation / Main==================================================*/.navigation { height: 40px; background-color: #333f4f; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;} ul.nav {} ul.nav ul { display: none; } ul.nav > li { position: relative; float: left; } ul.nav > li > a { display: block; padding: 0 20px; color: #FFFFFF; text-transform: uppercase; font-size: 1.083em; font-family: "Oswald"; line-height: 40px; text-decoration: none; } ul.nav > li:hover > a, ul.nav > li:active > a { /* -webkit-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); -moz-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); background-color: rgba(51,63,79,.09); */ color: #F15B19; } ul.nav li:hover:first-child a, ul.nav li:active:first-child a { -webkit-border-radius: 0 0 0 7px; -moz-border-radius:0 0 0 7px; border-radius:0 0 0 7px; } /*# Navigation / Sub-Menu==================================================*//* Showing the Sub-Menu */ul.nav li:hover > ul { display: block; }/* Making sure there is no space between Main and Sub-Menu */ul.nav ul { margin: 0 0 0 0; }/* If position "absolute" i can define custom width etc without errors! */ul.nav ul { position: absolute; left: -15px; right: -15px; padding: 10px 0 10px 0; background-color: #333f4f;}ul.nav li ul li a { display: block; text-align: center; /*color: #FEFEFE; -> only if JS is activated with color fading script like U232!*/}ul.nav li ul li > a { color: #8E5452; text-decoration: none; font-family: "Oswald"; }ul.nav li ul li:hover > a { color: #F15B19; }ul.nav li ul li:hover { -webkit-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); -moz-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); background-color: rgba(0,0,0,.15);} /*ul.nav li ul li:hover > a {}*//*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) { div.banner { height: 138px; background: url(images/logo/tablet.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) { div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) { div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) { div.banner { height: 90px; background: url(images/logo/mobile_port.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }} My HTML <?phpecho "<div class='sixteen columns half-bottom navigation'>"; echo "<span class='nav-btn'></span>"; echo "<ul class='nav'>"; // Forside echo "<li><a href='index.php'>Forside</a></li>"; // Job Søgere echo "<li><a href='#'>For Jobsøgere</a>"; echo "<ul>"; echo "<li><a href='#'>Uopfordret ansøgning</a></li>"; echo "<li><a href='#'>Emnebank</a></li>"; echo "</ul>"; echo "</li>"; // For Virksomheder echo "<li><a href='#'>For Virksomheder</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for jer</a></li>"; echo "<li><a href='#'>Rekruttering og udvælgse</a></li>"; echo "<li><a href='#'>Headhunting</a></li>"; echo "<li><a href='#'>Personlighedstest</a></li>"; echo "<li><a href='#'>Referencer</a></li>"; echo "</ul>"; echo "</li>"; // Ledige Stillinger echo "<li><a href='#'>Ledige Stillinger</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for dig</a></li>"; echo "</ul>"; echo "</li>"; // Kontakt echo "<li><a href='#'>Kontakt</a>"; echo "<ul>"; echo "<li><a href='#'>Om RightMatch</a></li>"; echo "<li><a href='#'>Mission & Vision</a></li>"; echo "<li><a href='#'>Nyt og artikler</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>";echo "</div>";?> Ideas? Link to comment Share on other sites More sharing options...
Ingolme Posted December 8, 2014 Share Posted December 8, 2014 Did you look up how to implement an accordion menu? Link to comment Share on other sites More sharing options...
rootKID Posted December 9, 2014 Author Share Posted December 9, 2014 A little bit, but i think it's no good due to the CSS system-frame i use. I'm using something that is called "GetSkeleton" which is based on "960Grid CSS Framework". However if it DOES work, i would consider adding it right now x). Do you think it is valid to add? Link to comment Share on other sites More sharing options...
Ingolme Posted December 9, 2014 Share Posted December 9, 2014 I don't see how there would be a problem. All an accordion menu does is show or hide parts of the menu using a sliding animation. Here's one implemented in jQuery UI: http://api.jqueryui.com/accordion/ Here's another implementation: http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3 Five more: http://cssmenumaker.com/blog/5-free-jquery-accordion-menus If one of them doesn't work for you, try another. There are hundreds of them out there. Link to comment Share on other sites More sharing options...
rootKID Posted December 9, 2014 Author Share Posted December 9, 2014 but i only need it when my users browser are in mobile mode, and when it's normal i need my menu to be according, that is why i dont think they will fit in... that i can see... Link to comment Share on other sites More sharing options...
Ingolme Posted December 9, 2014 Share Posted December 9, 2014 A menu is just a structure of list elements. Style it however you like, use media queries to make it look different on different screens. <nav id="menu"><ul> <li>Home</li> <li><span>Products</span> <ul> <li>Category 1</li> <li>Category 2</li> <li>Category 3</li> </ul> </li> <li><span>Services</span> <ul> <li>Category 1</li> <li>Category 2</li> <li>Category 3</li> </ul> </li></ul></nav> Here's the jQuery code from the second accordion example I linked to, modified to fit this structure. $("#menu span").click(function(){ //slide up all the link lists $("#menu ul ul").slideUp(); //slide down the link list below the span clicked - only if its closed if(!$(this).next().is(":visible")) { $(this).next().slideDown(); }}); What I'm going to do is change it to use the resize() and load() events to decide whether or not this functionality should be used. $(document).ready(chooseMenuType); // Choose menu when loading the page$(window).resize(chooseMenuType); // Choose menu when resizing the pagefunction chooseMenuType() { if($(window).width() > 600) { // Remove event listener $("#menu span").off("click", accordion); // Optionally show all lists. Remove this line if you want to $("#menu ul ul").show(); } else { // Add the event listener // Event listeners aren't duplicated, so there's no harm in doing this on every resize event $("#menu span").on("click", accordion); }}function accordion() { //slide up all the link lists $("#menu ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if(!$(this).next().is(":visible")) { $(this).next().slideDown(); }} Interestingly enough, you might not even have to remove the accordion menu events when resizing the page, meaning the resize() and load() events are unnecessary. If what you want on large screens is a horizontal menu with a dropdown, this accordion script will do exactly that if you change the CSS a little.Just use media queries. On large screens, set the top <li> elements to float left and position: relative, then set the inner <ul> elements to position: absolute. On small screens, set float: none and position: static. #menu > ul > li { position: relative; float: left;}#menu > ul > li > ul { position: absolute; top: 40px; left: 0;}@media screen and (max-width: 600px) { #menu > ul > li { position: static; float: none; } #menu > ul > li > ul { position: static; }} Link to comment Share on other sites More sharing options...
rootKID Posted December 9, 2014 Author Share Posted December 9, 2014 I will try this out later when im home, i might have an idea with the number 3 you linked to... or was it 1... the one where there is a video also, i just saw it and got an idea (maybe) x)... i'm out right now but will write back later when home and tested! Thanks! Link to comment Share on other sites More sharing options...
rootKID Posted December 9, 2014 Author Share Posted December 9, 2014 (edited) Ok i'm home now and tested. However i have chosen to go with one of those you listed up there, you were right, just needed a little bit of CSS, this helps one of my problems ALOT! This is the one i went with: http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3 However my code dosent works now, this is my JS: // NEW SOURCE// -----------------------$(document).ready(chooseMenuType); // Choose menu when loading the page$(window).resize(chooseMenuType); // Choose menu when resizing the pagefunction chooseMenuType() { // Bigger than 959px if($(window).width() > 959) { // Remove event listener $("#accordian h3").off("click", accordion); // Optionally show all lists. Remove this line if you want to //$("#accordian ul ul").show(); } else { // Add the event listener // Event listeners aren't duplicated, so there's no harm in doing this on every resize event $("#menu span").on("click", accordion); }}function accordion() { //slide up all the link lists $("#accordian ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if(!$(this).next().is(":visible")) { $(this).next().slideDown(); }} Changed some of the names and stuff, just to see if it was working properly, it does actually, but now whenever i resize my browser to be at mobile scale, the clicks on the menu dosen't have any form of effect... in other words dosen't react whenever i click on a menu item. This is my new HTML: <div id="accordian"> <ul> <li> <h3><span class="icon-dashboard"></span>Dashboard</h3> <ul> <li><a href="#">Reports</a></li> <li><a href="#">Search</a></li> <li><a href="#">Graphs</a></li> <li><a href="#">Settings</a></li> </ul> </li> <!-- we will keep this LI open by default --> <li class="active"> <h3><span class="icon-tasks"></span>Tasks</h3> <ul> <li><a href="#">Today's tasks</a></li> <li><a href="#">Urgent</a></li> <li><a href="#">Overdues</a></li> <li><a href="#">Recurring</a></li> <li><a href="#">Settings</a></li> </ul> </li> <li> <h3><span class="icon-calendar"></span>Calendar</h3> <ul> <li><a href="#">Current Month</a></li> <li><a href="#">Current Week</a></li> <li><a href="#">Previous Month</a></li> <li><a href="#">Previous Week</a></li> <li><a href="#">Next Month</a></li> <li><a href="#">Next Week</a></li> <li><a href="#">Team Calendar</a></li> <li><a href="#">Private Calendar</a></li> <li><a href="#">Settings</a></li> </ul> </li> <li> <h3><span class="icon-heart"></span>Favourites</h3> <ul> <li><a href="#">Global favs</a></li> <li><a href="#">My favs</a></li> <li><a href="#">Team favs</a></li> <li><a href="#">Settings</a></li> </ul> </li> </ul></div> Still working on the CSS but looking promising so far x) EDIT Never mind, i figured out the problem x) Now i have another problem, or so i think, just not sure how to type it in. Whenever i have the "normal" screen menu, i wish when my mouse goes over the h3/main menu item, all the submenu when they show, instead of just coming down i wont them to get a "slideDown" from the jQuery part, however whenever i try to add it to the JS it wont work, ideas etc? Edited December 9, 2014 by rootKID Link to comment Share on other sites More sharing options...
Ingolme Posted December 9, 2014 Share Posted December 9, 2014 Watch your jQuery selectors. You have two different things here: $("#accordian h3").off($("#menu span").on( Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now