I have this JS code:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
which opens up a new window on click. What I want it to do next from that first click is go to another function. That function entails a scroller that has 5 divs in it. Say I want it to go to the third div or ID, how would I go about writing that type of function? So a HTML example would be:
<div id="this">
<div class="outer">
<div class="innerdiv">
<div class="1" id="1">1</div>
<div class="2" id="2">2</div>
<div class="3" id="3">3</div>
<div class="4" id="4">4</div>
<div class="5" id="5">5</div>
</div>
</div>
</div>
This would represent my scroller. So on that initial first click, the idea is that it would open up a new window and scroll to that 3rd div, or if scrolling to it is to difficult, then go to that first div. http://jsfiddle.net/qYTK4/
<div class="arrowbox">
<div style="display:inline-block; width:155px; height: 50px; float:left;"></div>
<div class="leftbox" id="leftbox"></div>
<div class="backtohome">BACK TO HOME PAGE</div>
<div class="rightbox" id="rightbox"></div>
Using window.scrollTo() and move it to the objects position. Retrieve the position (X,Y) of an HTML element
jQuery.ScrollTo is a great, simple plugin for smooth scrolling animations. It has tons of options for ways to define the scroll behavior and is pretty easy to use. There are a ton of demos and examples on the site linked you should be able to use. In yours you would just tell it to scroll to either the DOM element itself or jQuery object/selector for the 3rd div.
Also, you can't have id attributes start with numbers (like your divs), it's not valid. Classes can but not IDs.
It is also a good idea to rely on click event handlers (i.e. $('.backtohome a').on('click', function() { // your code });) rather than onclick attributes.
Related
I have 3 elements that show/hide their contents when clicked on.
What I am aiming for: Click on element 1, brings the entire div into view. If I then click on element 2, the second div is brought into view.
What happens currently: Click on element 1, brings the entire div into view. Scroll down a bit and click on element 2, it scrolls back up to display the entire first div instead of the second div.
I believe the issue is that I have .content as the parameter in the scrollTop function but I haven't been able to figure out what I should put in there to address the issue.
My jquery/javascript is here:
$(document).ready(function(){
$(".flippy1").click(function(){
$(this).parent().children(".content").slideToggle(); //toggles the content
setTimeout(function(){
$('body').animate({scrollTop:$('.content').offset().top},200)
}, 200); //delay of 200 ms to let the entire slidetoggle animation finish, then scrolls to the top of the div
});
});
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Experience</h2>
</div>
<div class="content">
content goes here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Dogs</h2>
</div>
<div class="content">
contents goes here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Cats</h2>
</div>
<div class="content">
more content
</div>
</div>
</div>
</div>
The solution for me has been to use $("html,body") when animating scrollTop property. Some browsers do not play nicely with $("body") alone, although I have no proper explanation for this.
Second problem is you're referencing $(".content") in your timeout function. This animates scrollTop to the first occurrence of .content, not necessarily the clicked occurrence. But, we can do one better:
Third, and not a problem but a better way to handle, is to use the callback function of slideToggle: this function is code that gets executed only after slideToggle finishes. Do this rather than set a timeout. Timeout length is arbitrary, for example in a very old, very slow browser, 200ms may not be long enough duration to wait.
See the updates below:
$(document).ready(function(){
$(".flippy1").click(function(){
$(this).parent().children(".content").slideToggle( function(){
$('body,html').animate({scrollTop: $(this).offset().top},200);
});
});
});
If you want to scroll to the top including the headline, simply grab the parent again and use its offset instead.
This line:
$('body,html').animate({scrollTop: $(this).offset().top},200);
becomes:
$('body,html').animate({scrollTop: $(this).parent().offset().top},200);
Example here: https://jsfiddle.net/nb0fvu3u/
Parent example here: https://jsfiddle.net/nb0fvu3u/1/
This is roughly my setup:
<div class="wrapper">
<div class="first">
<a class="button" href="">click</a>
</div>
<div class="second">
<div class="third">
Stuff
<div>
</div>
</div>
Ok, so what I want to is this: when you click the a tag, the .third div should animate.
What I have so far is this:
button.click ->
third.animate
left: '+=100%'
The problem is, I have multiple of these wrappers on one page. So when I click the button, every '.third' div on the page animates. How can I select the right one and only that one?
Thanks!
Try this:
$('a').click(function(){
var third = $(this).closest('.wrapper').find('.third');
//use third variable to animate
});
You can use closest or parents.
If you want only one div to animate, assign an id to the div and animate only that one by$("#third").animate("left", "100%");
So, I have a requirement for dynamically generated content blocks on a page. These blocks have a thumbnail and when it is clicked, it should open a modal, and display an unique overlay window, as well as as the unique associated video.
I am trying to write some generic JavaScript that will traverse the DOM tree properly, so that when any particular thumbnail is clicked, a modal, the associated overlay, and the associated video will open.
Here is an example of what I have now (there are many of these, dynamically added):
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
and after attempting to do a bunch of different things, I ended up trying to do something like this for the JavaScript, which doesn't work:
$(".thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest(".window").removeClass("hide").addClass("show");
$(this).closest(".video").removeClass("hide").addClass("show");
});
CSS is very basic:
.hide { display: none; }
.show { display: block; }
Trying to make the click function generic as possible so it would work on any .thumbnail that was clicked. I've also interchanged find(".window") and children(".window") but nothing happens. Any ideas on what I'm doing wrong? Thanks!
Depending on what you actually want your classes to be, I'd use this code:
$(".thumbnail").on("click", function () {
var $block = $(this).closest(".block");
$block.find(".window, .video").add("#modal").removeClass("hide").addClass("show");
});
DEMO: http://jsfiddle.net/gLMSF/ (using different, yet similar code)
It actually finds the right elements, based on the clicked .thumbnail. It finds its containing .block element, then looks at its descendants to find the .window and .video elements.
If you actually want to include . in your attributes, you need to escape them for jQuery selection.
As for styling, you should probably just have the styling be display: block; by default, and then toggle the hide class. It's less work, and makes more sense logically.
You have a huge issue with your class names in HTML:
<div class=".block">
it should be
<div class="block">
Your modal is the only one that has the class properly named. Your DOM traversals will not work because they are looking for "block" but it's called ".block"
So fix it all to this and you should find more success:
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
Your code won't work because your selectors have periods (.) in your classes if that's actually what you want, you should try it like this:
$(".\\.thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest("\\.window").removeClass("hide").addClass("show");
$(this).closest("\\.video").removeClass("hide").addClass("show");
});
Otherwise just try removing the periods from the classes...
Also, you're using .closest() incorrectly, as it looks up through ancestors in the DOM tree...
You should change your code to:
$(".\\.thumbnail").on("click",function(){
$(this).next("\\.window").children(".video")
.addBack().add("#modal").removeClass("hide").addClass("show");
});
I am new to web design. I am making my resume now. I have navigation div like this:
<div id="nav" class="grid_12">
<div id="Home" class="grid_3">
<div class="button">
Home
</div>
</div>
<div id="Life" class="grid_3">
<div class="button">
Life
</div>
<img src="img/someimg.jpg">
</div>
<div id="Portfolio" class="grid_3">
<div class="button">
Portfolio
</div>
</div>
<div id="Contact" class="grid_3">
<div class="button">
Home
</div>
</div>
</div>
Then I have a script for the navigation:
<script type="text/javascript>
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
</script>
I want it so when someone holds the mouse over the button the image will appear under it. It is properly hiding the image, but fadeIn not working. I have no idea why it is not working.
.focus is bound to the "focus" event (I linked to a description of what it is rather than the event standard). This is most common when you tab to or click on text inputs, but it can apply to other elements as well.
The mouseenter (also mouseover, but the former is not triggered repeatedly when child elements are also hovered) event occurs when a mouse enters an element. The opposite is mouseleave (mouseout). http://api.jquery.com/mouseenter/
try putting your script inside a ready event of the document :
<script type="text/javascript>
$(document).ready(function(){
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
});
</script>
I believe you're using the 960gs, and one thing I have noticed is this: your four grid_3 divs are nested within your grid_12. The 960gs includes two classes called .alpha and .omega to fix the nested margins when a grid is inside a parent grid. You need to put the .alpha class on the first child div - which in this case is your <div id="#home"> and the .omega class on the last child div which is your <div id="Contact">. This will fix the margins you will have on the internal nested four grid_3's.
I have many questions here so please be patient with me, very new jquery/javascript user.
Here is my current page http://integratedcx.com/index.php/experience
Basically I would like each of the projects and project categories to have the hidden div, slidedown like a drawer not just appear as they do now.
I have tried to achieve this through jquery without much success, here is my working http://integratedcx.com/temp/slide.html
How do I get the div below the one opening to "ease" down instead of jump
How do I get my close feature (orange box) in recent projects to work properly
How do I get my the project list on the right side of image to hide (as it does on my current page) as well as have the drawer opening effect.
Is there an easy way to i.e. variable to assign this to multiple divs using jquery.
Thank you in advanced for any/all help.
For your question 4, With the following script (based on ComputerArts's answer above), you can easily add the slide effect to a large number of divs:
$(document).ready(function () {
$(".toggle-to-show").click(function (evt) {
var targetdiv = $(evt.currentTarget).attr("data-drawer");
$(targetdiv).slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('.bracket', evt.currentTarget).html('less');
$('.project', evt.currentTarget).hide();
$('.closebox', this).bind('click', function(e) {$(evt.currentTarget).triggerHandler('click');});
}
else {
$('.bracket', evt.currentTarget).html('more');
$('.project', evt.currentTarget).show();
$('.closebox', this).unbind('click');
}
});
})
})
Then, you can mark up the toggle buttons and sliders as follows:
<div class="toggle-to-show" data-drawer="#firstsection">
<div class="project">Project One Heading</div>
<div class="bracket">more</div>
</div>
<div id="firstsection">
<h3>Project One Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#secondsection">
<div class="project">Project Two Heading</div>
<div class="bracket">more</div>
</div>
<div id="secondsection">
<h3>Project Two Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#thirdsection">
<div class="project">Project Third Heading</div>
<div class="bracket">more</div>
</div>
<div id="thirdsection">
<h3>Project Three Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
As for points #1 and #2, try this fiddle
I only changed the first script tag to
<script type='text/javascript'>
$(document).ready(function () {
$(".projectx-show").click(function () {
$("#projectx").slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('#projectx-bracket').html('less');
}
else {
$('#projectx-bracket').html('more');
}
});
})
})
</script>
FYI, you don't need to use $(window).load and then $(document).ready... one is enough
As for #3, I don't understand what you're trying to say.
#4, yes there is a way, using classes and keeping the structure the same for every bloc in your page.
http://api.jquery.com/slideDown/
$("#link_id").click(function(){
$("#div_to_show").slideDown();
});
http://api.jquery.com/slideUp/
$('#div_to_close').slideUp();
Using both of the methods from 1, and 2
By using class names instead of IDs for your selectors. For example:
$(".link_class").click(function(){
$(this).parentsUntil('.ex-wrapper').find('.div_to_show').slideDown();
});