I tried to use a menu-bar example I found at webdesign.tutsplus.com.
(http://webdesign.tutsplus.com/articles/create-a-quick-sticky-menu--webdesign-12120)
My problem is, that my popup is loaded directly after the page is loaded - but I just want this to happen when I click on one of my menu-items.
I thought removing $(document).ready would do the trick - but it did not...
The Popup:
<div class="popup">
<div class="arrow"></div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(
function(){
$("#support").click(function () {
$(".popup").fadeToggle(150);
return false;
});
});
</script>
CSS
div.popup{
display: none;
float: right;
position: relative;
left: 5%;
background-color: #2C3E50;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
}
div.popup ul li a{
position: relative;
display: inline-block;
font-size: .85em;
color: #fff;
padding: 0 2em 0 2em;
margin: .4em;
text-align: center;
text-decoration: none;
transition: all 0.1s ease-in-out;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
}
div.popup ul li a:hover{
background-color: #1ABC9C;
}
Thank you,
Chris
The only guess I can make from your code is you might have missed some CSS rules. Please check the following, Did you hide the popup element in your css.
STEP-8 of tutorial
div.popup{
display: none;
/* Other styles */
}
This might fix your problem.
EDIT
Here is a fiddle demonstrating your Code. Your code has no errors but some allignment issues. Everything is working fine. Did you add the JQuery library. Check this fiddle.
http://jsfiddle.net/9Gfbb/
To make sure, you can do this to your code.
$(document).ready(function(){
$(".popup").hide(); // hide the popup in the case, that it wasn't hidden.
$("#support").click(function () {
$(".popup").fadeToggle(150);
return false;
});
});
Related
I'm trying to launch a click event on an li but it doesn't seem to work.
$( document ).ready(function() {
$("#menu ul li").click(function(){
alert(this.id);
});
});
.wrapper {
display: grid;
grid-template-columns: 2fr 7fr 2fr;
grid-template-areas:
"left header header"
"left content ad"
"left content ad"
"footer footer footer"
}
.header{
grid-area:header;
position: sticky;
top:0;
background-color: red;
height: 100px;
text-decoration: none;
}
.left-sidebar{
grid-area:left;
top:0;
background-color: #22262A;
position: sticky;
height: 100vh;
padding:0px 0px 0px 0px;
font-size: 26px;
text-align:center;
}
.left-sidebar a{
padding: 15px 0px 15px 0px;
color:#000;
display: block;
text-decoration: none;
}
.nav a:hover{
background-color: #272b30;
}
.ad{
grid-area:ad;
background-color: navy;
}
.content{
grid-area:content;
padding: 5px 5px 5px 5px;
background-color: yellow;
height: 100vh;
}
.footer{
grid-area:footer;
background-color: grey;
height: 125px;
}
#logo{
margin-top: 50px;
margin-bottom: 50px;
}
.no-list{
display: block;
text-decoration: none;
}
#menu ul li{
background-color: yellow;
z-index: 500;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="assets/js/main.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="ad">advertisements</div>
<div class="left-sidebar">
<nav id="menu">
Sylent
<ul class="nav" id="test2">
<li id="getBierTest" onclick="alert()">try</li>
</ul>
</nav>
</div>
<div class="content">main content div</div>
<div class="footer">footer div</div>
</div>
</body>
</html>
I used this in another project and it worked. But this time I'm using CSS grid and suddenly it doesn't. Any ideas what might caused this?
Thanks in advance.
I've copied your code into a Codepen:
https://codepen.io/chrisboon27/pen/NYYNvJ?editors=1111
The only problem I can see is that two alerts fire. The first one is empty, but the second one works. This happens because as well as adding the event via jQuery:
$( document ).ready(function() {
$("#menu ul li").click(function(){
alert(this.id);
});
});
you are also calling alert inline in your html, but without any arguments, so you just get an empty alert:
<li id="getBierTest" onclick="alert()">try</li>
If you remove the inline alert it might work for you.
Your code is absolutely correct. But always make sure that you a load JS after the page is fully loaded. Use $(document).ready() function to do that.
$( document ).ready(function() {
$("#menu ul li").click(function(){
alert(this.id);
});
});
try this if you are trying to target specific li
$("#menu ul li").on('click', function(){
alert(this.id);
});
More optimized solution can be
$(document).on('click', '#menu ul li',function(){
alert(this.id);
});
Hope this will help you
I'm very new to jquery/javascript and I'm trying to make an animated dropdown box when I click onto a button within my navbar.
My code works within jsfiddle http://jsfiddle.net/SQHQ2/2898/
But when I try to implement this within my website and refresh the page, the div disappears completely. I used inspect element and it appears to change to "display:none". I've tried changing the div to a button but still no avail. I just want the button to work! lol
Please can someone show me where I'm going wrong?
This is my html:
<div class="col-md-4 right">
<ul id="user-bar">
<li><div class="btn-burger" id="userlinksbox"><span class="fa fa-bars"></span></div></li>
<li>My Account</li>
<li>Logout</li>
</ul>
</div>
<!----- USER LINKS BOX ----->
<div class="user-links-box">
<h1>Test</h1>
</div>
My CSS:
.user-links-box {
height: 400px;
width: 285px;
padding: 15px;
top:-400px;
right:0px;
position: absolute;
background-color: #111;
color: #fff;
text-align: center;
z-index: 4;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
And finally, the js I'm using:
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
});
Try these changes :
HTML
<div class="user-links-box" style="display:none">
<h1>Test</h1>
</div>
CSS
.user-links-box {
height: 400px;
width: 285px;
padding: 15px;
top:40px; // CHANGED HERE
right:0px;
position: absolute;
background-color:#111;
color:#fff;
text-align: center;
z-index: 4;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#userlinksbox { display: inline-block!important; }
JS
$(document).ready(function(){
$("#userlinksbox").click(function(){
$('.user-links-box').slideToggle();
});
});
Is it really #userlinksbox?
Your fiddle tells me #user-links-box
try this
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').css({'display':'block'});
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
});
How about placing the .css() function in #Vilvan's answer outside the .toggle() function?
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
$('#userlinksbox').css({'display':'block'});
});
I'm styling a menu that has a toggleClass in there, so far no problem, but when i have the hover function and i do hover then mouse on the menu elements the function executes on all the menu's elements, how do i manage to only affect one at the time?
The menu:
<div id="menu_segundo">
<ul>
<li class="curso av">AV</li>
<li class="curso dc">DC</li>
<li class="curso dp">DP</li>
<li class="curso pa">PA</li>
</ul>
</div>
The Css
#menu_segundo {
margin-top: 20px;
float: right;
background: #58ACFA;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
.expand_menu{
color: white;
font-family: DIN;
width: 150px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
The JS
var segundo = $('#menu_segundo').find('ul').children();
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})
Here is a DEMO of the menu
This does not need JS to function.
Simply change .expand_menu to .curso:hover in your CSS.
Alternatively, to fix your JS use:
$("#menu_segundo").on("hover", ".curso", function(){
$(this).toggleClass('expand_menu');
});
The problem with your JS is that you are toggling the class on all li elements. segundo is set to equal all li elements, not the one being hovered.
UPDATE
There is a problem beyond the initial applying of classes, the CSS/HTML structure is not rendering correctly. The problem is that extending one of the li elements increases the size of the entire ul moving all li elements in the process.
Updating the HTML to this:
<div id="menu_segundo">
<div class="curso av">AV</div>
<div class="curso dc">DC</div>
<div class="curso dp">DP</div>
<div class="curso pa">PA</div>
</div>
And updating the CSS to:
#menu_segundo {
margin-top: 20px;
float: right;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
background: #58ACFA;
float: right;
clear:both;
}
.curso:hover{
width: 150px;
}
Gets the desired behavior. See this Fiddle for an example.
Note
The CSS can also be set to
.expand_menu{
width: 150px;
}
To continue with the JS solution.
Try like
var segundo = $('#menu_segundo li')
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})
This question already has answers here:
Code working in jsFiddle but not in browser
(2 answers)
Closed 8 years ago.
I have a hide/show div script that works how I want it to here: http://jsfiddle.net/XwN2L/3537/
However when i'm coding it in anywhere else, whether I link javascript and css or embed it (as below) within the html file, it won't work.
<title></title>
<style type="text/css">
ul.buttons {
display: inline-block;
height: 35px;
position: fixed;
bottom: 18px;
left: 43px;
z-index: 40;
list-style-type: none;
}
.buttons li {
list-style-type: none;
display: inline;
}
ul#divMenu {
height: 40px;
background-color: #ddd;
position: fixed;
padding-left: 76px;
padding-right: 15px;
bottom: 15px;
left: 17px;
right: 17px;
z-index: 3;
line-height: 39px;
vertical-align: middle;
}
#divMenu li {
list-style-type: none;
display: inline;
font-family: ProximaNovaLtRegular;
font-size: 12px;
margin-right: 2em;
}
#divInfo {
height: 40px;
background-color: #ddd;
position: fixed;
padding-left: 76px;
padding-right: 15px;
bottom: 15px;
left: 17px;
right: 17px;
z-index: 3;
line-height: 39px;
vertical-align: middle;
}
</style>
<script type='text/javascript'>
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
$('.hide').click(function () {
$('.targetDiv').hide();
});
</script>
</head>
<body><ul class="buttons">
<li><img src="menu.png" class="show" target="Menu"></a></li>
<li><img src="info.png" class="show" target="Info"></a></li>
<li><img src="close.png" class="hide" ></a></li>
</ul>
<ul id="divMenu" class="targetDiv">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="divInfo" class="targetDiv">Lorum Ipsum 2</div>
</body>
</html>
Could anybody tell me what I am doing wrong ?
What JSFiddle Is Doing
onLoad
JSFiddle wraps any code in the JavaScript/jQuery box in $(window).load(function(){...});. This is because you have the second drop down in Frameworks & Extensions set to onLoad. With this setting, the script will wait for all media and data to load and the page to be rendered.
onDomReady
If you the onDomReady option, JSFiddle uses $(function(){...}); Which just waits for the DOM to load, not necessarily all the data.
What You Can Do
To make you code behave as the JSFiddle code does, you can use either of the above functions.
Another common way to write similar code is $(document).ready(function(){...});. like the onDomReady code, this only waits for the DOM to load. In my opinion, this is the most commonly used method because it is the most intuitive.
Are you including jQuery?
If you are, make sure the DOM is loaded first.
$(function(){});
I could not find, for the life of me a jQuery less way to accomplish getting the value of the clicked li item and populating the textarea box id="result" with the clicked result.
How can this be done? This seems like rocket science to me.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
border: 1px solid blue;
float: left;
position:absolute;
}
#menu, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#menu, ul, li {
padding: 2px;
}
#menu li:hover{
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}
</style>
<script type="text/javascript">
function showMenu(){
document.getElementById("one").style.display="block";
}
function hideMenu(){
document.getElementById("one").style.display="none";
}
</script>
</head>
<body>
<div id="container">
<div id="one" onclick="hideMenu()">
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div id="two"><img src="images/arrow_double.png" onclick="showMenu()"></div>
<br>
<textarea id="result"></textarea>
</body>
</html>
This is my suggestion, though it's not tested in Internet Explorer:
// pick a name that's useful to you:
function textToTextArea (e) {
/* most browsers pass the event object to the function,
IE does, or did, not; here we use the passed-event if it's
available, or the window.event if it's not there (implying IE):
*/
e = e || window.event;
// finding out the text property we can access to retrieve an element's text:
var text = 'textContent' in document ? 'textContent' : 'innerText';
/* getting the textarea by its 'id',
and setting its innerHTML to be equal to the text of the clicked 'li':
*/
document.getElementById('result').innerHTML = e.target[text];
}
var list = document.getElementById('menu');
list.onclick = textToTextArea;
JS Fiddle demo.
Incidentally, in jQuery the above could be abbreviated to:
$('li').click(function(){
$('#result').val($(this).text());
});
JS Fiddle demo.
It's not always the best solution, but it saves a lot of time and handles cross-browser issues very well (saving us from normalizing for the event object); and while you don't (and shouldn't) have to justify not-using jQuery, sometimes it's worth remembering that there are other, more useful, things we can all be doing rather than simply avoiding it for arbitrary (and in this case unspecified) reasons.
DEMO jsFiddle
Description
This is a pure JavaScript answer, it uses the this on each li item. This event binding can be done in the window.onload event with a for loop if you'd prefer. It works on all browsers, the layout looks wrong to me but as that isn't the question I didn't care.
Let me know if you need more assistance.
HTML
<div id="container">
<div id="one" onclick="hideMenu()">
<ul id="menu">
<li onclick="itemPicked(this)">Item 1</li>
<li onclick="itemPicked(this)">Item 2</li>
</ul>
</div>
</div>
<div id="two">
<img src="http://realestatecommunities.com/wp-content/uploads/2011/01/blue-arrow-down.jpg" height="20px" width="20px" onclick="showMenu()" />
</div>
<br/>
<textarea id="result"></textarea>
JS
function showMenu() {
document.getElementById("one").style.display = "block";
}
function hideMenu() {
document.getElementById("one").style.display = "none";
}
function itemPicked(el) {
document.getElementById("result").value = el.textContent;
}
CSS
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
border: 1px solid blue;
float: left;
position:absolute;
}
#menu, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#menu, ul, li {
padding: 2px;
}
#menu li:hover {
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}