I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?
I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});
If something's not clear, please let me know.
I think you should add position:absolute; to "slider", and set its position.
You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.
You need an absolute position for z-index to work.
Related
Good evening Community,
I have a problem with my code.
HTML:
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
I want if I hover over the div "mbubble" that the class "thome" will change it's text. I tried to do that by making them visible / invisible.
CSS:
#mbubble:hover ~ .thome { visibility:hidden; }
#mbubble:hover ~ .tabout { visibility:visible; }
But it's sowhing no affect?
Can you tell me how you would do that? Or at least any way that's working to change the text by hovering?
Best regards,
Michael
How about this:
$('#mbubble').hover(function () {
$('.thome').html('<p style="letter-spacing:10;">NOW IT IS DIFFERENT</p>');
})
If your structure is really that simple, then a trick with pointer-events could work:
the idea is to kill pointer-events on a and reactivate it only on #mbubble, since when you hover a child, parent is hovered too, the selector can be taken from the parent .
a {pointer-events:none; }
#mbubble {pointer-events:auto;}
a:hover + #title .thome , .tabout {display:none;}
a:hover + #title .tabout {display:block;}
<a href="aboutme.php">
<div class='aboutus'>i don't trigger anything
<div id="mbubble">
I DO
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
Now, if you realize that without pointer-events but only a;hover it works , you may understand it can be usefull only if there is other content in <a> that should not react . only clicking on #mbubble will fire the link.Was your example too little ? if not, just use a:hover
http://caniuse.com/#search=pointer-events
It look doable in css, anyway, while not recommmended, there is a quick inline solution in javascript using the transversal DOM, like this:
You got to keep in mind that it can have strange behaviors, non easily copiable by right clicking, this is why inline javascripts should not be used directly. There is workaround around it, good luck.
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="document.getElementById('title').children[0].children[0].textContent='Enter the void!'" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
So a more nicer way is to use a function like this:
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="changeText()" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
<script>
function changeText() {
document.getElementById('title').children[0].children[0].textContent='Enter the void!'
}
</script>
Still, this isn't clean enough, the good way in javascript is to add an event listener, like this:
-
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome">
<p style="letter-spacing:10;">Text BEFORE</p>
</div>
<div class="tabout">
<p style="letter-spacing:10;">Text AFTER</p>
</div>
<script>
var toBeWatched = document.getElementById('mbubble');
toBeWatched.addEventListener("mouseover", function(event) {document.getElementById('title').children[0].children[0].textContent
= 'Enter the void!';setTimeout(function() { document.getElementById('title').children[0].children[0].textContent
= 'Text BEFORE!!!';
}, 2500);
}, false);
</script>
This way the html part is left untouched. (..)
This is what the code looks like.
<head>
<link type="text/css" rel="stylesheet" href="C:\Users\User\Desktop\css1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="C:\Users\User\Desktop\js.js"></script>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="logo">
LOGO
</div>
<div class="nav">
<a href="http://www.google.se">
Stuff
</a>
<a href="javascript:void(0)">
Other stuff
</a>
<a href="javascript:void(0)">
More stuff
</a>
</div>
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Stuff</span>
<span>Other stuff</span>
<span>More stuff</span>
</div>
<div class="mobile_close">
</div>
</div>
</div>
</div>
<div class="image_container">
<div class="inner_content" id="slide1">
<h2>
CONTENTS
</h2>
</div>
<a class="button" href="javascript:void(0)"></a>
</div>
</body>
the .js file contains this code
setTimeout(function(){
$("#slide1").css('opacity', '1');
},800);
setInterval(function(){
$(".button").toggleClass("opacity");
},1000);
//Navigation
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
Can anyone help me out with what I'm doing wrong and how it can be fixed?
Thank you! /AJ
UPDATE: The .js loads (tried the alert function), but does not fill the function it should. Original pen can be found on http://codepen.io/yuriylianguzov/pen/qjwEe
One of the problems is that you are trying to reference a javascript file from a physical file path, and not a url (or relative path). You can't use your harddrive path in an html file to include javascript.
<script src="C:\Users\User\Desktop\js.js"></script>
If your javascript is in the same folder as your html, try something like this:
<script src="js.js"></script>
I'm not exactly sure what the expected behavior for the JavaScript is, because it appears to be doing what it is intended to do. If you look at the DOM in the codepen link that you provided the element with the id of 'slide1' has its opacity style set to 1 (see below) and the anchor tag with class of 'button' is getting the class 'opacity' toggled on and off every second (not depicted below, but you can see it happening in firebug).
<div class="image_container">
<div id="slide1" class="inner_content" style="opacity: 1;">
<h2>
We are who we choose to be.
</h2>
</div>
</div>
The other two click handler's are targeting empty elements (the element with class of 'mobile_nav', and the element with class of 'mobile_close') so they aren't going to do anything.
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Projects</span>
<span>Profile</span>
<span>Contact</span>
</div>
<div class="mobile_close"></div>
</div>
I hope this helps!
1) Some of the elements your javascript is acting on don't have any content
2) Change the line $(".mobile_nav_menu").animate({right: 0}); to: $(".mobile_nav_menu").animate({"right": "0"}); and do the same with the other one, though it won't have any functionality, really.
3) your class mobile_nav_menu needs to have css that says position:relative for the attribute "right" to work.
4) I'd recommend moving your mobile_close div outside the mobile_nav_menu div so it doesn't move when you click it
If anyone has stuff to add, please do so.
I have four thumbnail divs called .jobs enclosed by a #job-wrap. Upon clicking a .job, #job-wrap needs to fadeOut, empty, load .job info in, and fadeIn. However, once emptying the #jobwrap, the rest of my site shoots up due to the .jobs no longer taking any height real estate. How can I maintain #job-wrap's height after I empty it, and load contents in.
$('.job').click(function(){
var job = $(this).attr("name");
var jh = $('#job-wrap').height();
$('#job-wrap').css('height', jh);
alert(jh);
$('#job-wrap').fadeOut(700, function(){
$(this).empty();
$(this).load("content.html#" + job, function(){
$(this).fadeIn(700);
});
});
});
Here I've tried to set the current #job-wrap's height to itself before the empty begins. (it doesn't work, although the alert does give the current height which varies due to the sites responsiveness)
<div id="job-wrap">
<a class="link">
<div class="job" name="eventuall">
<div class="job-img">
<img src="images/thumb-eventuall.png" />
</div>
<div class="job-blurb">
<h3>Eventuall</h3>
<p>UX Design, Front End </p>
</div>
</div>
</a>
<a class="link">
<div class="job">
<div class="job-img">
<img src="images/thumb-audivy.png" />
</div>
<div class="job-blurb">
<h3>Audivy</h3>
<p>UX Design</p>
</div>
</div>
</a>
</div>
Here is the HTML the function acts upon. Any help is greatly appreciated.
Set a min-height to #job-wrap and instead of fading in and out, animate the opacity instead. The fade method sets the element display to none in the callback function.
$('.job').click(function(){
var job = $(this).attr("name");
var jh = $('#job-wrap').height();
$('#job-wrap').css('height', jh);
$('#job-wrap').animate({opacity: 0}, 700, function(){
$(this).empty();
$(this).load("content.html#" + job, function(){
$(this).animate({opacity: 1}, 700);
});
});
});
.fadeOut() fades down and then sets the div to display: none; - Maybe you can change the opacity and use visibility: hidden; or some other property that keeps the div's place in tact? That seems to be the main problem I find with most jQuery methods that end in display: none; --- on the other hand, if you have set sizes, you could put a wrapper around it and then maybe just have the div inside it do what you are doing now.
I would suggest using min-height as well as outerHeight, and adding an inner wrapper. The outer wrapper will stay visible, and you set the min-height on the outer wrapper. The inner wrapping div is the element that gets emptied and hidden see http://jsfiddle.net/mf933/1/ or use below code:
$('.job').click(function(){
var job = $(this).attr("name");
var jh = $('#job-wrap').outerHeight();
$('#job-wrap').css('min-height', jh);
alert(jh);
$('#job-wrap-inner').fadeOut(700, function(){
$(this).empty();
$(this).load("content.html#" + job, function(){
$(this).fadeIn(700);
// uncomment to reset the min-height after loading
// $('#job-wrap').css('min-height', 'inherit');
});
});
});
HTML:
<h1>Top Content</h1>
<div id="job-wrap">
<div id="job-wrap-inner"> <a class="link">
<div class="job" name="eventuall">
<div class="job-img">
<img src="images/thumb-eventuall.png" />
</div>
<div class="job-blurb">
<h3>Eventuall</h3>
<p>UX Design, Front End </p>
</div>
</div>
</a>
<a class="link">
<div class="job">
<div class="job-img">
<img src="images/thumb-audivy.png" />
</div>
<div class="job-blurb">
<h3>Audivy</h3>
<p>UX Design</p>
</div>
</div>
</a>
</div>
</div>
<h1>Bottom Content</h1>
I have three sections with a default logo...left,middle and right..on mouse over all sections are changing one by one with their own respective logo.
When I mouse-over the left section it has changed with its logo but the problem is when I mouse-over that logo on left section its turned into the default section ( means left section vanished along with its logo)that I don't want.
I need the mouse effect will be Off when i mouse-over the left section logo, same thing will be applicable on the other two section..
The Html :
<div id="container">
<div class="logo">
<img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
</div>
<div class="main" id="left">
<div class="dot1-top">
<img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
</div>
<div class="showhide">
<div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>
</div>
</div>
<div class="main" id="middle">
<div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide2">
<div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
</div>
</div>
</div>
<div class="main" id="right">
<div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide3">
<div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
</div>
</div>
</div>
</div>
And Here's the jsfiddle
You need to add a hover effect on the class logo-middle.
e.g.
$(".logo-middle").hover(function mouseIsOverImage() {
/* keep the image */
}, function mouseIsOffImage() {
/* make the image what it was before */
});
By the way, you also should adjust your hover functions to clear the animation queue. If you quickly mouse over and off of the sections several times you'll see that there are many animations that get queued up and then all continue run until they're done. $.clearQueue() should do the trick.
I'm not sure if this is what you need but I did a little cleanup to your markup and CSS and came up with this solution for the hover effects
$('.bg').hide();
$('.main').hover(function (){
$(this).siblings('.main').find('.bg').stop().fadeOut();
$(this).find('.bg').stop().fadeIn();
$('#logo img').attr('src',$(this).data('logo'));
}, function () {});
$('#container').mouseleave(function(){
$('#logo img').attr('src',$(this).data('logo'));
$('.main .bg').stop().fadeOut();
});
You can check the updated fiddle here
This is the first time I've ever using stackoverflow, so here I go.
I'm creating a website and currently, I have created buttons for the navigation. By default (the homepage) shows a slideshow using JavaScript and this is all contained within a div.
When I click, let's say the 'About Me' page, I want that div to fade out and another div to fade in which will contain an image and text.
Here's my code:
<body>
<div id="top_wrapper">
<a class="button navigation" id="homeBtn">Home</a>
<a class="button navigation" id="aboutBtn">About Me</a>
<a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a>
<a class="button navigation" id="successBtn">Success Stories</a>
<a class="button navigation" id="workBtn">Community Work</a>
<a class="button navigation" id="charityBtn">Charity</a>
<a class="button navigation" id="contactBtn">Contact Me</a>
</div>
<div id="home">
<div id="sliderFrame">
<div id="slider">
<img src="_images/_image01.jpg" />
<img src="_images/_image02.jpg" />
<img src="_images/_image03.jpg" />
<img src="_images/_image04.jpg" />
<img src="_images/_image05.jpg" />
</div>
</div>
<div id="border">
<img src="_images/_border.png" />
</div>
</div>
<div id="aboutme">
<div id="text">
<p>This is the text</p>
</div>
</div>
</body>
In my example, I want that when the user clicks on the 'About Me' button, the div 'home' fades out and the div 'aboutme' fades in.
I've tried nearly all of the examples on stackoverflow as well as whatever the jQuery/JavaScript websites and Google could throw at me and no luck.
One way could be to do it like so:
$('#aboutBtn').click(function(){
$('#home').fadeOut(300);
$('#aboutme').delay(400).fadeIn(300);
});
Edit: the solution above was more of a quick fix for an individual case, the solution below is the kind of thing you should do instead, especially when you have multiple anchors/divs.
Here's a working jsFiddle example.
HTML:
<a class="buttonNav" target="1">Home</a>
<a class="buttonNav" target="2">About</a>
<a class="buttonNav" target="3">Success</a>
<div id="div1" class="targetDiv">Home Div</div>
<div id="div2" class="targetDiv">About Div</div>
<div id="div3" class="targetDiv">Success Div</div>
CSS:
.targetDiv {
display:none;
color:red;
}
.targetDiv:nth-of-type(1) {
display:block;
}
jQuery:
$(function(){
$('.buttonNav').click(function(){
$('.targetDiv').fadeOut();
$('#div'+ $(this).prop('target')).delay(400).fadeIn();
});
});
This approach would be much cleaner for scaling usage of options, like in your case.
You can fadeout the home div and in callback of this fadeout you can fadein the about me div. Somthing like this:
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').fadeIn('slow');
});
});
Here is the FIDDLE
Here is an improved example: jsfiddle
This example will allow you using the same div as a container for all links...
Note that you should add a href for your link tags.
Have fun.
jquery:
$('#aboutme').hide();
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('about me text!!!').fadeIn('slow', function(){ });
});
});
$('#homeBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ });
});
});
//add other click events for each link.
EDIT: Tune up - and save time
See this jsfiddle
Now you should set only an array key as the same id of the relevant link and type in his text!
have fun