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>
Related
I am creating a website using WordPress, so the content is created dynamically.
The elements ID is also dynamically generated
Each container can have these elements (a container can have multiple - but not the same):
t_1
f_1
f_2
f_3
I also add the container count at the end of the elements ID, so each element will have a unique ID
Let's say the PHP will generate a HTML like this:
<div id="container_1">
<div id=f_1_1>
//content
</div>
<div id=f_2_1>
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2>
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3>
//content
</div>
</div>
I would like to animate the position of these elements as the user scrolls, I added javascript to do it:
var scroll = window.pageYOffset;
window.addEventListener('scroll', function() {
scroll = window.pageYOffset;
requestAnimationFrame(scroll)
}, false)
function scroll() {
document.getElementById("f_1_1").style.top = scroll * 10 + 'px';
}
So here is the problem, I don't know which elements should I get by ID.
I thought about making a loop where I check each container for the elements inside, however I think it would use too much resources and would be laggy as the function runs each time the user scrolls.
An other solution I tried is to add the javascript dynamically to each container so I know exactly which elements I need to animate. It worked only for the first container as when I added the next container there were multiple function using the same name and only the last function has been executed
<div id="container_1">
<div id=f_1_1>
//content
</div>
<script type="text/javascript">
function scroll() {
document.getElementById("f_1_"+<?php echo $pagecounter?>).style.top = scroll * 10 + 'px';
}
</script>
</div>
You can use - WOW.js for animation when element is comes inside viewport.
<div id="container_1">
<div id=f_1_1 class="wow myCustomAnimation">
//content
</div>
<div id=f_2_1 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3 class="wow myCustomAnimation">
//content
</div>
</div>
Where you have to write myCustomAnimation as per your requirment.
I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!
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.
i have the following function written in javascript which operate a slide up/down box. but in firefox, it malfunctions. it just opens/closes once. after that no play.
i am getting the height() param from the box and storing it in hidden input. but firefox is unable to read the correct height of the box.
look at the code to understand better :
JS :
function boxCollapse() {
$("#boxHeight").attr("value", parseInt($("#accTipsBox").height()));
$("#accTipsBox").animate({height:'0px'});
$(".btnCollapse").css({display:'none'});
$(".btnExpand").css({display:'block'});
$("#accTipsBox").css({padding:'0px'});
}
function boxExpand() {
$("#accTipsBox").animate({height: $("#boxHeight").attr("value")});
$(".btnExpand").css({display:'none'});
$(".btnCollapse").css({display:'block'});
$("#accTipsBox").css({padding:'0px'});
}
HTML :
<section class="accBox grey">
<header>
<div class="title">DISCLAIMERS</div>
<a style="display: none;" class="btnExpand" href="javascript:void(0);"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a>
<a style="display: block;" class="btnCollapse" href="javascript:void(0);"><img src="/resources/images/boxCollapseGrey.jpg" alt="button"></a>
</header>
<div id="accTipsBox" style="height: 125px; padding: 0px;">
<input type="hidden" id="boxHeight" value="125">
<div class="accBoxContent">
<div><p></p><p></p><p></p></div>
</div>
</div>
</section>
I think this is what you were going for:
//bind a `click` event handler to all the elements with the `btnExpandCollapse` class
$('.btnExpandCollapse').on('click', function (event) {
//stop the default behavior of clicking the link (stop the browser from scrolling to the top of the page)
event.preventDefault();
//first select the parent of this element (`header` tag) and then get its sibling element that has the `accTipsBox` class, then take that element and slide it up or down depending on its current state
$(this).parent().siblings('.accTipsBox').slideToggle(500);
});
With some slight tweaks to your HTML:
<section class="accBox grey">
<header>
<div class="title">DISCLAIMERS</div>
<!-- Notice there is only one link now that does the job of both -->
<a class="btnExpandCollapse" href="#"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a>
</header>
<!-- Notice I changed the ID attribute to CLASS so this code will work for repeated structure -->
<div class="accTipsBox" style="height: 125px; padding: 0px;">
<div class="accBoxContent">
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</div>
</div>
</section>
Here is a demo: http://jsfiddle.net/VGN64/
Here is some documentation:
.slideToggle(): http://api.jquery.com/slidetoggle
.siblings(): http://api.jquery.com/siblings
On a side-note, if you want to store data about a DOM element, use jQuery's $.data() method:
var $box = $("#accTipsBox");
$.data($box[0], 'height', $box.height());
You can then access this data like this
var height = $.data($('#accTipsBox')[0], 'height');
Notice that I appended [0] onto the end of the jQuery object to return just the DOM node associated with the object, this is required by the $.data() method: http://api.jquery.com/jquery.data. This is a very fast method of storing data associated with DOM elements.
I have a bit of a problem I cant figure out.
I have a slideshow on my page using jquery.
<div id="carousel">
<div id="round">
<div class="box box-sec">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box box-easy">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box competitive">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box personal">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box business">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box affiliate">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="arrows">
<div class="next"><span>Test</span><img src="_includes/images/icons/rarr.png" /></div>
<div class="prev"><span>Test</span><img src="_includes/images/icons/larr.png" /></div>
</div>
</div>
</div>
</div>
only 1 slide is active at a time, I want to somehow find the name of the next div, and write that into the "Test" span tags so that it shows up on hover and if clicked the span tag will then get the name of the next div and update itself, does this make sense? thanks
ADDED FIDDLE
http://jsfiddle.net/TNRMk/
Ive tried this with no luck
$('.arrows').click(function() {
$(".next span").html($('.roundabout-in-focus').next().attr('name'));
$(".prev span").html($('.roundabout-in-focus').prev().attr('name'));
});
Here is a good start for you:
$("div.arrows div").bind("mouseover", function() {
$("div.arrows div.next").children("span").text($("div.roundabout-in-focus").next("div").attr("class"));
$("div.arrows div.prev").children("span").text($("div.roundabout-in-focus").prev("div").attr("class"));
});
A number of points to be made:
This will not work for the prev arrow when the first item is selected.
I wasn't sure which part of the class name you wanted so you will need to do some modification
It needs to be on hover, or in the plugin itself as there are other ways to control the carousel. So setting on click won't work all the time.
The plugin provides callbacks btnNextCallback and btnPrevCallback that are executed after clicking the "next"/"prev" buttons are clicked.
The current focused item has the class .roundabout-in-focus.
I have made this jsfiddle for you to see (all you div have the same content so I've replaced it for the sake of the example).
Here's the (commented) code:
$(document).ready(function() {
function updatePrevNextTitle() {
// as this function is used as a callback for the plugin
// 'this' is the roundabout wrapper div
var $wrapper= $(this),
// get the currently focused div
$frontDiv = $wrapper.find('.roundabout-in-focus'),
// get the next/prev div content relative to the focused div
// also handle the circular roundabout by checking if
// .next() and .prev() return something, otherwise
// get .first() and .last()
nextContent = $frontDiv.next().length
? $frontDiv.next().find('.carousel-caption').html()
: $frontDiv.first().find('.carousel-caption').html(),
prevContent = $frontDiv.prev().length
? $frontDiv.prev().find('.carousel-caption').html()
: $frontDiv.last().find('.carousel-caption').html();
$wrapper.find('.next span').html(nextContent);
$wrapper.find('.prev span').html(prevContent);
};
$('#round').roundabout({
childSelector: 'div.box',
btnNext: ".next",
btnPrev: ".prev",
// set the method updatePrevNextTitle as the callback handler
btnNextCallback: updatePrevNextTitle,
btnPrevCallback: updatePrevNextTitle
}
// set it also as the 'initialized' callback for the
// initial setting of the prev/next span text
,updatePrevNextTitle);
});
One way is to add an active class in your selected div:
//e.g. after the selection event occurs:
$('div').click(function() {
$(this).addClass('active'); //keep track which div is clicked with the active class
//read the class name of the next sibling and store it in test (if i got it right)
$(".Test").html($('.active').next().attr('class'));
});
Maybe not 100% right but can give you a headstart!
According to your jsfiddle the name attribute is missing on your roundabouts,
try this instead:
$('.arrows').click(function() {
$(".next span").html($('.roundabout-in-focus').next().find('.carousel-caption').html());
$(".prev span").html($('.roundabout-in-focus').prev().find('.carousel-caption').html());
});