I am trying to show form when user clickes on the button. Form is showing up but there seems to be a bug for a second. form is centered when the slide up function is executing and when it is done it fits normally to the page.
Here is the js:
$(document).ready(function() {
$('.clicked').on('click', function(e) {
var current = $(e.target).next();
var show = current.hasClass('hidden');
if (show) {
current.hide();
current.removeClass('hidden');
current.slideDown('slow');
} else {
current.slideUp('slow', function() {
current.addClass('hidden');
current.slideUp('slow');
});
}
})
});
I do not think there is any bug in js code, most likely missing something in css.
Have a look here and click on blue button "Click Here" http://codepen.io/nikasv/pen/vKEEZr
Thanks.
.trip-form{
width: 100%;
overflow:hidden;
}
will do the trick even with the shaking you experience :)
You should try to set width of class "trip-form" to 100%.
Related
I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:
$(".office-default").mouseover(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).removeClass("hidden");
});
$(".office-default").mouseout(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).addClass("hidden");
});
Here's the entire code:
http://jsfiddle.net/leadbellydesign/jR6pa/1/
I've done tons of searches and have come up with nothing helpful. I don't want to change images, I just want to show div's.
You still need to fix the space below the divs, but this should work
DEMO
$("area").hover(function () {
$office = $(this).attr("href");
$(".office-default > div").addClass("hidden");
$($office).removeClass("hidden");
}, function(){
$(".office-default > div").addClass("hidden");
$("#office-1").removeClass("hidden");
});
UPDATE
To fix the spacing issue, update your .office-default CSS:
DEMO
.office-default {
background:#444;
padding:5px 15px 0;
width: 80%;
height:150px;
}
ive a problem which is driving me crazy. im trying to explain...
i have a very long scrolling page with about 10 divs, one below the other (no space between).
at the bottom of the viewing port is a button with an id and a position: fixed. when i scroll up or down the button is fixed while the divs move up or down.
i want to have different id's on the button depending on which div layer is in the viewing port. that means if one divlayer fills over 50% of the available space the href of the button should change...
i tried the inview.js, but the problem is, that 2 divs at the same time have the inview class...
my current code:
$('#div4, #div5, #div6').bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
var $div4 = $('#div4');
if($div4.hasClass("inview")){
$('#button1').attr('id', 'button2');
}
you see, every div which is in the viewport the button gets a new id.
has anyone of you a solution?
thanks ted
You can try to remove the inview class before adding it.. Something like this:
var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
$divs.not(this).removeClass("inview");
if (visible == true) {
$(this).addClass("inview");
}
});
Another suggestion is to use the Waypoints plugin and fire when the div crosses the 50% mark.
The only difficult part is that depending on the direction you'll need to select the current div or the one above.
Plugin: http://imakewebthings.com/jquery-waypoints/
Demo: http://jsfiddle.net/lucuma/nFfSn/1/
Code:
$('.container div').waypoint(function (direction) {
if (direction=='up')
alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
else
alert('hit ' + $(this).attr('id'));
}, {
offset: $.waypoints('viewportHeight') / 2
});
I have a div box, with a lot of p tags in side, and it is getting very long.
So I added on the top of the box, a show more text.
The box have a height: 100px; overflow: hidden;, but then when someone click on show more, I would like it to slideDown the box, to get the normal height, which it would have had if height: 100px; was not set.
Any idea how to do this?
I tried the following: (Note, the box have class .show-limited-content and the show more have class .show-more)
$('.show-more').live("click", function() {
$('.show-more').live("click", function() {
$('.show-limited-content').slideDown("slow");
});
return false;
});
You could use the animate method.
It would look something like the following, depending on how your html is written:
$('.show-more').on("click", function() {
$('.show-limited-content').animate({
height: '500px'
}, 2000);
return false;
});
See this working example to see it in action.
If you need the height dynamically, just add
var curHeight = $('.show-limited-content').height();
$('.show-limited-content').css('height', 'auto');
var autoHeight = $('.show-limited-content').height();
$('.show-limited-content').height(curHeight);
above the event handler and change the animate css to
height: autoHeight
Here is another example.
Im using http://sorgalla.com/projects/jcarousel/ as a slider....
It shows one image at a time, and a total of four images... When displaying the first image, i dont want the prev arrow to be visible, and the same if im at number 4 image, i dont want the next arrow to be visible...
How do i do this?
I initialize the script like this:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
You can use CSS to hide the arrows. Adding the disabled classes is handled by the plugin itself.
.jcarousel-prev-disabled, .jcarousel-next-disabled
{
visibility:hidden;
}
Demo: http://jsfiddle.net/ubanC/88/
You can cheat by using two below options:
Using CSS,you should override to set some below classes:
<style>
jcarousel-prev-disabled,
jcarousel-next-disabled,
jcarousel-prev-disabled-horizontal,
jcarousel-next-disabled-horizontal{
background-position:0 0;
}
</style>
Using Javascript, this solution is same as the first. We should remove the classes: disable for next and previous buttons:
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemFirstOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled");
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled-horizontal");
}
},
itemLastOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-next").removeClass("jcarousel-next-disabled");
$(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");
}
}
});
});
</script>
P/S: I just try to read it's document and use Firebug(~Edit on the fly) to detect. If you could, you can try. It's fun.
I'm using this HTML,CSS and Javascript code (in one document together if you want to test it out):
<style type="text/css">
#slider_container {
width: 200px;
height: 30px;
background-color: red;
display:block;
}
#slider {
width: 20px;
height: 30px;
background-color: blue;
display:block;
position:absolute;
left:0;
}
</style>
<script type="text/javascript" src="../../js/libs/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").mousedown(function() {
$(document).mousemove(function(evnt) {
$("#test").html("sliding");
}).mouseup(function() {
$("#test").html("not sliding");
$(document).unbind("mousemove mouseup");
});});
});
</script>
<div id="test">a</div>
<div id="slider_container">
<div id="slider"></div>
</div>
Everything (surprisingly) works fine in IE, but firefox seems to totally clusterf*ck when this javascript is used. The first "slide" is okay, you drag, it says "sliding", you drop, it says "not sliding". On the second "slide" (or mousedown if you will), firefox suddenly thinks the div is an image or link and wants to drag it around.
Screenshot of the dragging:
Obviously the blue div half-positioned in the red div is the one being dragged. Windows does not capture the cursor when you take a screenshot, but it's a stop sign.
Is there someway to prevent this default behaviour?
You need to return false from the event handlers to prevent the default action (selecting text, dragging selection, etc). Based on the code posted by Crispy, Here is my solution:
$(function() {
var sliderMouseDown = false;
$("#slider").mousedown(function() {
sliderMouseDown = true;
return false;
});
$(document).mousemove(function(evnt) {
if (sliderMouseDown) {
$("#test").html("sliding");
return false;
}
});
$(document).mouseup(function() {
if (sliderMouseDown){
$("#test").html("not sliding");
sliderMouseDown = false;
return false;
}
});
});
Neat bug, after messing around with it, it appears that Firefox remembers the mousedown event on the slider and treats it as if the user had started selecting some text (hence the "stop sign" you were seeing). So then Firefox treats the next mousedown event as if the user was dragging the text away somewhere. There might be a more appropriate solution, but simply adding a
$("#slider").focus()
does the trick since then Firefox will "reset" the cursor so it won't think the user is dragging some text.
I'd also like to comment you're repeatedly binding and unbinding events (which doesn't seem to sit well with ie7 doing multiple drags). I would suggest something like the following, which binds the delegates once.
$(function() {
var sliderMouseDown = false;
$("#slider").mousedown(function() {
sliderMouseDown = true;
});
$(document).mousemove(function(evnt) {
if (sliderMouseDown) {
$("#test").html("sliding");
}
});
$(document).mouseup(function() {
if (sliderMouseDown)
{
$("#test").html("not sliding");
$("#slider").focus(); //<-- fix the FF issue to reset cursor
sliderMouseDown = false;
}
});
});