I'm trying to set up a side menu and having some trouble with the jQuery Toggle. Everything else seems to function fine. I did try for a about 2 hours before posting here, so been getting a little frustrated (seeing how this is pretty basic stuff). Any suggestions?
Below is the format and exact order of my page layout, I only added separator text ("The side menu", "Image I click..", etc.) to make reading/understanding easier. Any help would be greatly appreciated.
The side menu:
<div id="SideMenu" class="sidenav">
<img class="CloseBtn" src="./wht_menu.png" />
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
Image I click to open the menu:
<img class="OpenBtn" src="./blk_menu.png" />
The rest of my page:
<div id="main">
My main page content goes here...
</div>
My CSS & jQuery:
<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>
You need to wrap the jQuery in this block (docs):
$( document ).ready(function() {
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
Working example using your code:
http://codepen.io/anon/pen/xEaqqA
There is a possibility that jQuery not loaded on page at the time.
<script>
(function($){
$(document).ready(function(){
$(".OpenBtn, .CloseBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
})(jQuery);
</script>
Thanks for your help everyone! Although pivemi's answer was not the solution, a deeper review of his codepen link got things working, my doc wasn't calling on the jQuery library. Adding this to the top was my solution:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
Your CSS could look like this:
.menu {
position: fixed;
height: 100%;
width: 272px;
padding-bottom: 50px;
overflow: auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
background-color: #fff;
z-index: 999;
display: none;}
And your jQuery script:
$(document).ready(function(){
$('.show-menu').click(function(){
fade_menu();
});
$('.menu-item').click(function(){
fade_menu();
});});});
function fade_menu(){
$('.menu').fadeToggle("fast");
}
Related
THE AIM
I would like to show a spinner/loader until the window of the browser loads completely and after that, it must fade/hide.
ATTEMPTS
I've tried a jQuery code suggested in another question (How to show Page Loading div until the page has finished loading?) which is shown below. Additionally, I've also tried not using Bootstrap and use https://projects.lukehaas.me/css-loaders instead as suggested in the same question.
THE PROBLEM
None of the above gives me the result that I need as the spinner/loader shows above the content of my page and doesn't fade/hide.
SUMMARY
I would like to know what I might be missing.
Thanks for your help!
$(window).load(function() {
//$(".spinner-border").fadeOut("slow");
$(".spinner-border").hide();
});
.images {
height: 100px;
border: 1px solid black;
margin: 10px;
}
.spinner-border {
color: #d4d4d4;
width: 8rem;
height: 8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="spinner-border"></div>
<h2>Gallery</h2>
<img src="img-1.jpg" class="images">
<img src="img-2.jpg" class="images">
<img src="img-3.jpg" class="images">
Hi JoeHat I solved it like this (see codepen), works with bootstrap 4 and Jquery 3.4.1. Couldn't get it to work until I used Jquery below. Also added a timer.
Here's [a link] https://codepen.io/pieperrr/pen/PowBjZO
$(window).bind("load", function() {
setTimeout(function() {
$('.overlay-loader').fadeOut(function() {
});
}, 5000);
});
I'm facing a difficulty to make the drop down list looks good as it has messed up with CSS
DEMO.HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
<style>
li{
display: block;
}
</style>
</head>
<body>
<div id='wrap'>
<div id="clickable_div">MENU</div>
<div id="nav_menu">
<ul class="dropDown">
<li id="li_1"><img src="images/ori_12.png"></li>
<li id="li_2"><img src="images/ori_14.png"></li>
<li id="li_3"><img src="images/ori_15.png"></li>
<li id="li_4"><img src="images/ori_16.png"></li>
</ul>
</div>
</div>
</div>
</body>
<script>
$('#wrap').mouseover( function(){
$('#nav_menu').slideDown();
});
$('#wrap').mouseleave( function(){
$('#nav_menu').slideUp();
});
$('#nav_menu li img')
.mouseover(function () {
this.src = this.src.replace('/ori_', '/hover_');
})
.mouseout(function () {
this.src = this.src.replace('/hover_', '/ori_');
});
</script>
</html>
DEMO.CSS:
#clickable_div {
width: 166px;
background-color: #9c9c9c;
display: block;
}
#nav_menu {
width: 166px;
height: auto;
background-color: #CCC;
display: none
}
//*{padding:0;margin:0} This will achieve what I want but eventually all my other elements on the same page will have no padding and margin
#wrap {
width: 166px;
}
By copying the code, you will see the drop down menu has messed up. It can be fix by using *{padding:0;margin:0} but all the other elements on the same page will have no padding and margin which is definitely not the desired output. I've tried set padding and margin to 0 for each and every element such as #wrap, #nav_menu but none of them works.
Your issue is with the ul which by default takes some margin. You can reset it independently.
try add this
ul.dropDown{
margin:0px;
}
Fiddle
Plus the transition issue on your menu while hovered in and out quickily can be resolved using stop() and also note that pair event for mouseleave is mouseenter not mouseover So try
$('#wrap').mouseenter( function(){
$('#nav_menu').stop(true, true).slideDown();
}).mouseleave( function(){
$('#nav_menu').stop(true, true).slideUp();
});
or just
$('#wrap').on( 'mouseenter mouseleave', function(){
$('#nav_menu').stop(true, true).slideToggle();
});
Fiddle
When you use the asterisk (*) as as selector in CSS, you are selecting every element on the page! That is a lot to select. Fortunately, CSS provides a way to select specific elements only.
for example, all you want to select is the <ul> on the page, right? Follow this pattern for a selector: parent child{margin:0px;} To make this what you want you can do this: #nav_menu ul.dropDown{margin: 0px;}.
That should fix your problem!
Check the bottom for revised edition
Alright, here's the issue. I have a li with a div inside, and I'm trying to hover the li to get the div to slide up into view.
Here's the HTML:
<li id="one">
<div>
<h4>title</h4>
<p>description</p>
</div>
</li>
Right now I have this in my CSS:
#one div { display: none; }
And this for my JS:
$(document).ready(function() {
$('#one').hover(function() {
$('#one > div').css({ display : 'block' });
});
});
I know I could just used CSS psuedo :hover to make it pop up, but I thought if I wanted to to a slide effect then I might as well do it all in JS. The first problem is this isn't working :|. Once I get it to just show up I want to add a slide effect to it, and I'm not sure if this is the right way to approach doing that.
Thanks guys/gals
revised
New JavaScript
$(document).ready(function() {
$('#one').hover(function () {
$('#one > div').slideToggle();
});
});
This works! Although it comes down from the top, and I planned on having it come up from the bottom.
Part of the problem is that slideUp() in jQuery hides the selection and slideDown() shows the selection. To have an element slide up into view, you need to do your own .animate().
CSS:
#one {
overflow: hidden;
position: relative;
border: 1px solid gray;
height: 40px;
}
#one div {
position: absolute;
bottom: -100%;
}
jQuery:
$('#one').hover(
function() {
$(this).find('div').animate({
bottom: '0%'
}, 'fast' );
},function() {
$(this).find('div').animate({
bottom: '-100%'
},'fast');
}
);
jsFiddle: http://jsfiddle.net/blineberry/mrzqK/
what about using jQuery slideUp or fadeIn?
http://api.jquery.com/slideToggle/
http://api.jquery.com/slideDown/
http://api.jquery.com/slideUp/
This code works for me.
$(document).ready(function () {
$('#one').hover(function () {
$('#one > div').slideDown();
});
});
Needs a bit of tweeking to make it look nice but it does slide down.
edit
Here is a site describing how to use animate to do what you want.
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
you may do something like this
$(div).show("slide", { direction: "down" }, 1000)
or even the animate property may solve your problems
more here
http://docs.jquery.com/UI/Effects/Slide
api.jquery.com/animate/
firstly you need to create a min-width and min-height or something because li there is currently nothing to hover over.(just something to make the li have a presence put a red border on it and you'll see what I'm talking about.)
secondly I think you want to slideDown()... I think slideUp() will make it dissapear right?
I added a bg color for demo purposes.
hears a little demo:
http://jsfiddle.net/R9A3G/
If you're looking for a specific animation you may have to do some css tricks along with jquery .animate().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style>#one div { display: none; }</style>
<head>
<title></title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#one').hover(function() {
$("#one").find("div").slideDown("slow");
});
$('#one').mouseout(function() {
$("#one").find("div").slideUp("slow");
});
});
</script>
<body>
<div>
<li id="one">
<div>
<h4>title</h4>
<p>description</p>
</div>
</li>
</div>
</body>
</html>
TRY THIS
I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?
Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>
FanyBox, which is uses the jQuery library is the right tool for that.
In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.
I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>
I am trying to make a sort of "scales" look, where two divs will slowly animate up and down like being weighed on a scale. I could use some help with the functions though please, I can not get two to animate simultaneously on page load, and I need them to go up, then back down, then up, etc... Make sense? Here is what I have so far, I am kinda new to jquery obviously, :)
Thanks for any help!
<style type='text/css'>
body {
background: #262626;
}
.main
{
margin: 20px auto;
position:relative;
height:400px;
width:300px;
}
.content
{
float: left;
position:absolute;
bottom: 10px;
left: 100px;
height:40px;
width: 100px;
}
.content2
{
float: left;
position:absolute;
top: 10px;
left: 100px;
height:40px;
width: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".content").animate({top:'10px'},{ queue:true, duration:3000 }),
$(".content2").animate({bottom:'10px'},{ queue:true, duration:3000 });
});
</script>
<div class="main">
<div class="content">
<img src="pixel.png" alt="" />
</div>
<div class="content2">
<img src="functional.png" alt="" />
</div>
</div>
If you want them animated simultaneously, you should set queue to false.
document.ready does not wait for images to download. So use window.onload instead. And you should not be queueing if you want them to animate simultaneously. Also, I think in your animation you need to reset the top/bottom values respectively, so they don't interfere with each other...
$(window).load(function() {
$(".content").animate({top:'10px', bottom:0}, 3000);
$(".content2").animate({bottom:'10px', top:0}, 3000);
});
I think there should be a semicolon instead of a comma at the end of this line:
$(".content").animate({top:'10px'},{ queue:true, duration:3000 }),
That would explain why the next line is not being called.
For anyone looking for a solution. The queue: true statement kind of worked, but not really so I created another one.
If you're running the same animation, the best way to execute the command is to put them within one statement.
Use a comma to separate classes/ids.
ie) .content, .content2.
$(document).ready(function() {
$(".content, .content2").animate({top:'10px'},{ duration:3000 }),
done :)
Here is what I came up with, with help from various sources. This give the "teeter totter" effect on page load which I was going for.
<script>$(document).ready(function(){
$("#box1").animate({top:'+=150px'},3000 );
$("#box2").animate({top:'-=150px'},3000 );
$("#box1").animate({top:'-=150px'},3000 );
$("#box2").animate({top:'+=150px'},3000 );
$("#box1").animate({top:'+=100px'},4000 );
$("#box2").animate({top:'-=100px'},4000 );
$("#box1").animate({top:'-=100px'},4000 );
$("#box2").animate({top:'+=100px'},4000 );
$("#box1").animate({top:'+=50px'},5000 );
$("#box2").animate({top:'-=50px'},5000 );
$("#box1").animate({top:'-=20px'},5000 );
$("#box2").animate({top:'+=20px'},5000 );
});
</script>
I'm afraid this may be too "brute force", but I don't know of a better, smoother way to do this.