I created a div that has the full height of it's content set to 500px. First 200px of the 500px is, lets say, a preview. So I set it's height to 200px and overflow: hidden. I then added this script:
<div class="stretcher">
<script type="text/javascript">
$('.stretcher').toggle(
function(){
$(this).animate({'height': '500px'}, 300);
},
function(){
$(this).animate({'height': '200px'}, 300);
}
);
</script>
That works but the problem is that I need the contents of the div to be clickable. However, with this script wherever I click it either expands the div or returns it back to the original 200px.
Any idea how I could do it? Maybe adding icons of arrow up and down or something.
The toggle() function used that way is deprecated and removed in newer versions of jQuery, use a flag instead :
$('.stretcher').on('click', function(e) {
if (e.target === this) {
var h = $(this).height() > 220;
$(this).animate({'height': ( h ? 200 : 500 ) }, 300);
}
});
Checking if the target equals this stops any problems when clicking other elements inside .strecher
Try this...
<div class="stretcher">
<div class="clickable"></div>
</div>
<script type="text/javascript">
$('.clickable').toggle(
function()
{
$(this).parent().animate({'height': '500px'}, 300);
},
function()
{
$(this).parent().animate({'height': '200px'}, 300);
}
);
</script>
You have an area called clickable and when you click that it animates the parent container div, but it won't do it when you click the div itself.
You could wrap your code in a function that has an exact match. As #adeneo points out. An example below using your existing code in this manner.
$('.stretcher').on('click', function(e) {
if (e.target === this) {
$('.stretcher').toggle(
function(){
$(this).animate({'height': '500px'}, 300);
},
function(){
$(this).animate({'height': '200px'}, 300);
}
);
}
});
Related
here is my fiddle
the '.item' click function that shows the '.pull_down_content' doesn't always work why is this?
i've found that if you click the first 'tile' this will work fine and whilst that is open click the next tile still works fine but if you then go back to the original tile the click function stops working and only the hover works?
why is this?
here is part of my code..
$(this).children('.item').on('mouseenter mouseleave click', function(e) { e.stopPropagation();
if ($('.timelineTile').hasClass("clicked")) {
if (!$(this).data('clicked')) {
var Height = e.type==='mouseenter' ? '60px' : e.type==='click' ? '300px' : '0px';
$(this).siblings('.pull_down_content').stop().animate({'height': Height}, 300);
$(this).siblings('.pull_down_content').children('.inner').css({'display': 'block'}, 300);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$(this).siblings('.pull_down_content').stop().animate({'height': '0px'}, 300);
$(this).siblings('.pull_down_content').children('.inner').css({'display': 'none'}, 300);
}
} }
});
It looks like you are adding additional click events on the children every time you click on '.timelineTile'. You should move the above code outside of the '.timelineTile' click event. At the very least remove the existing events before re-adding them.
I'm looking for a code that scrolls up to the top of the currently active panel heading of my bootstrap 3 html/css accordion. The closest solution I've found on stackoverflow is the snippet of js below.
This snippet works fairly well, but when a panel heading gets clicked the page scrolls such that the very top of the panel content is flush with the top of the screen. Is there a way to modify this so that the scrolling effect will result in the panel "heading" (as opposed to the top of panel content area) being visible at the top of the screen?
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset)$('html,body').scrollTop(offset.top); }); });
Let me know if I should be sharing the bootstrap accordion html as well.
I used this and it works fine you can adjust the -20 after the .offset().top if you need to tweak it up or down a little.
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-title a').offset().top -20
}, 500);
}
});
});
This is to target the specific .panel-heading clicked as per James Wilson's comment on the accepted answer.
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -20
}, 500);
}
});
});
All I changed from gigelsmith's accepted answer is 'var offset' and the scrollTop's target.
I couldn't get the answer above to work, perhaps I'm missing something but I can't see how the scrollTop line above relates to the currently opened accordion item so used the following code instead. Hope it helps someone else:
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-collapse.in').siblings('.panel-heading').offset().top
}, 500);
}
});
});
Always animate looks a bit too much so this is my version to only do the job when heading is over the visible part.
(note that I use a data-accordion-focus to apply the fix)
$('[data-accordion-focus]').on('shown.bs.collapse', function (e) {
var headingTop = $(e.target).prev('.panel-heading').offset().top - 5;
var visibleTop = $(window).scrollTop();
if (headingTop < visibleTop) {
$('html,body').animate({
scrollTop: headingTop
}, 500);
}
});
By using .panel-default as selector of .on(), you can scroll to the active panel.
$('#accordion').on('shown.bs.collapse', '.panel-default', function (e) {
$('html,body').animate({
scrollTop: $(this).offset().top
}, 500);
});
I am attempting to change the text of a HTML element using javascript and jquery. This is my code so far, and I can't seem to get it to work. I have googled it and can't seem to find anything on it.
$("div#title").hover(
function() {
$(this).stop().animate({
$("div#title").html("Hello")
}, "fast");
},
function(){
$(this).stop.animate({
$("div#title").html("Good Bye")
}, "fast");
}
);
Any help would be greatly apreciated.
$("div#title").hover(
function () {
$(this).stop().html("Hello").hide(0).fadeIn("fast");
},
function () {
$(this).stop().html("Good Bye").hide(0).fadeIn("fast");
}
);
jsFiddle example
The way you are doing currently the syntax is incorrect, also you cannot animate a text as such instead you would need to animate an element holding the text. Also not clear on what peoprty you want to animate, Here couple of examples:
Animating Opacity:
$("div#title").hover(
function () {
$(this).stop().css('opacity', '0').html(function (_, oldText) { // Set the opacity of the div to 0 and then change the html (flip it based on last value)
return oldText == 'Good Bye' ? 'Hello' : 'Good Bye'
}).animate({
opacity: 1 // Animate opacity to 1 with a duration of 2 sec
}, 2000);
});
Fiddle
Animating Width:
$("div#title").hover(
function () {
$(this).stop().animate({
'width': '0px' // Animate the width to 0px from current width
}, 2000, function () { // On completion change the text
$(this).html(function (_, oldText) {
return oldText == 'Good Bye' ? 'Hello' : 'Good Bye'
}).animate({ // and animate back to 300px width.
'width': '300px'
}, 2000);
})
});
Fiddle
You can try this also
$("div#title").hover(
function() {
$(this).stop().fadeOut("slow",function(){
$(this).html("Hello")
}).fadeIn("slow");
},
function(){
$(this).stop().fadeOut("slow", function(){
$(this).html("Good Bye")
}).fadeIn("slow");
});
The text can not really encouraged, you can change the content using html method.
Lettering.js is a plugin to play in a more visual with text.
http://letteringjs.com/
$("#title").hover(function(){
$(this).html("Hello");
},function(){
$(this).html("Good Bye");
});
Typing Style
<font size="7" style="position:absolute; left:0px; top:0px; width:150px; z-index:50;">Hello World!</font>
<div id="test" style="position:absolute; left:0px; top:0px; height:100px; width:150px; z-index:60; background-color: #ffffff;"></div>
$('#test').animate({"left" : "150"}, 2000);
I've coded one plugin for that purpose, you can check it on github: jquery-bubble-text.
You can use it this way:
bubbleText({
element: $element, // must be one DOM leaf node
newText: 'new Text', // must be one string
});
Look one example in this jsfiddle.
Hope you enjoy it :)
Select a HTML element.
Here' my example:
<h1 id="heading">Heading1</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
//Changing the text part
$("#heading").text("1Heading");
// No needed code
var read = document.getElementById("heading");
var text = read.value;
console.log(text);
//Should be 1Heading
</script>
Make sure you load the jQuery first:
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
When a user clicks on the "Contact Me" button, i want the screen to slide to the #contact element, however cannot figure out how to do it. I've tried various different snippets of code and tried to tailor it to my needs, but nothing seems to work.
The site is here; http://dombracher.com/
Simply want the screen to slide to the div mentioned above, rather than quickly snap to it.
Thanks in advance.
$(document).ready(function() {
$("a[href^='#']").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
You can animate window scroll by yourself
$(".menu2").click(function(){
$(document.body).animate({
"scrollTop": $("#contact").offset().top
}, 2000, "swing"); // animation time and easing
return false; // preventing default jump
});
Fiddle: http://jsfiddle.net/M8JE2/
Or use jquery plugin like http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html to make any/all local links work with animation.
Here it is , scrolls to the bottom of the page since your contact form is there:
jQuery(function () {
jQuery('#nav1 li.menu2').click(function (e) {
jQuery("html, body").stop().animate({
scrollTop: jQuery(document).height()
}, 1000);
e.preventDefault();
return false;
});
});
I am trying to make a carousel of sorts. I am kind of stuck with hiding and displaying the next and precious buttons once a div moves to the far left and right of its container.
I think i have everything correct regarding calculating the widths but for some reason when you click the buttons, elements stay hidden irrespective of the conditional comments which should dictate when they should be hidden or shown.
Here is a link to what i have thus far. Click the MoveLeft and MoveRight buttons. http://www.ehbeat.com/test/
<script type="text/javascript">
$(document).ready(function () {
//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();
//Check width of GalleryItem
var galleryItemWidth = $(".GalleryItem").innerWidth();
//Check distance from left
var position = $('.GalleryItem').position();
var galleryItemLeft = position.left;
$(".MoveRight").click(function () {
$(".GalleryItem").animate({
"left": "+=50px"
}, "slow");
$(".GalleryItem2").animate({
"left": "+=100px"
}, "slow");
});
$(".MoveLeft").click(function () {
$(".GalleryItem").animate({
"left": "-=50px"
}, "slow");
$(".GalleryItem2").animate({
"left": "-=100px"
}, "slow");
});
$(".Controls").live('click', function () {
if (galleryItemLeft >= "0") {
$('.MoveRight').hide();
}
else {
$('.MoveRight').show();
}
});
if (galleryItemWidth == galleryWidth - galleryItemWidth) {
$('.MoveLeft').hide();
}
});
</script>
It looks like you setup all of your variables inside the $(document).ready() call.
This means that while they're being set on load, they're not getting updated with each click.
Your galleryItemLeft, galleryItemWidth and galleryItemWidth variables need to be updated on each click, so I'd recommend re-assigning the values in each click (by moving the assignment into the live functions)
Edit Also, as your last if statement is excluded from any click function, it'll need to be relocated to inside the live click events as well.
-Chris
Chris is right, code should look like this:
$(".Controls").live('click', function() {
position = $('.GalleryItem').position();
galleryItemLeft = position.left;
if(galleryItemLeft > "0") {
$('.MoveRight').hide();}
else{
$('.MoveRight').show();
}
if(galleryItemWidth == galleryWidth - galleryItemWidth) {
$('.MoveLeft').hide();
}
});