We Keep Coding

draggable ui that implicate a condition on specific position

I am struggling in a specific problem. I actually have a draggable element based on a grid of 4 and I would like to create an event each time the draggable item reaches a specific position on this gird.
Here is the html of this grid,
<div class="selector">
<div class="title">
<h2>Vælg lånebeløb</h2>
</div>
<div class="draggable">
<h3 id="krd">kr</h3>
</div>
<div class="line">
<img src="./resources/images/line.png" alt="line">
</div>
<div class="legend">
<p>3.000</p>
<p>4.000</p>
<p>5.000</p>
<p>6.000</p>
</div>
</div>
and here is the jquery,
$("#krd").draggable({
grid: [ 190, 0 ],
cursor: "move",
containment: '.selector',
drag: function( event, ui ) {
if(ui.position.left = 190) {
$(".bluebox h2").text("3.000 Kr");
} else if (ui.position.left = 380) {
ect......
} {
}
}
});
What I am trying to do is that when we move the bar, it changes the text in the sidebar. I tried different options since but couldn't figure out what I am missing. Here is the link of the page on github of the project, maybe you will have an idea about it.
Here is the link of the code in github
https://github.com/erwanriou/goKredit---Frontpage/
and the render of the page to get a better idea of the problem.
https://erwanriou.github.io/goKredit---Frontpage/

Expanding upon my comment, I would advise using jQuery UI Slider. You will need to theme it, but the code would be:
$(function() {
$("#krd").slider({
min: 3,
max: 6,
value: 3,
slide: function(e, ui) {
$(".bluebox h2").text(ui.value + ".000 Kr");
}
});
});
Example (in progress): https://jsfiddle.net/Twisty/bjfuLjzL/2/

Unfold Submenu conditions (jQuery)

I'm stuck with a jQuery issue that I don't manage to solve.
I've created a menu with sub menu elements. I would like to toggle the height of content by clicking in menu items. The thing is when I click on other item, the content collapse. Kind of tricky to explain, I've put two websites doing the job
http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/
I guess these two websites are using Shopify.
$(document).ready(function() {
$(".button").on("click", function() {
if($(".content").height() == 0) {
$(".content").animate({height: "300px"});
}
else if($(".content").height() == 300) {
$(".content").animate({height: "0px"});
}
});
});
Here is my jsfiddle
-> Thank a lot in advance.

Here's version of your fiddle that uses the data attribute to target divs with desired content, and another data tag containing desired heights to animate (but there are many other ways).
Clicking on the same button toggles it shut, this is achieved by adding an indicative class.
The 'hiding' divs may contain further divs with classes and layout as required.
$(document).ready(function (){
$(".b").on("click", function (){
var $this = $(this),
target = $this.data('target'),
tall = $this.data('tall'),
content = $(".content");
target = $('.'+target).html(); // get the html content of target divs
content.html(target); // insert said content
if (!$this.hasClass('on')) { // if it hasn't been clicked yet..
$(".b").removeClass('on'); // say that none have been clicked
$this.addClass('on'); // say that just this one has been clicked
content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
} else {
content.animate({height: "0px"});
$this.removeClass('on');
}
});
});
.content {
background: coral;
width: 100%;
height: 0px;
overflow:hidden;
}
.hiding{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>
<div class="content">Le contenu</div>
<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>

jQuery - hide div, then show on click

So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?

slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.

As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you

$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".

Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle

Get size of Image when jQuery accordion applied

It seems like in jQuery when an element is not visible width() returns 0.
when I remove the accordion the height is reported correctly. I tried wrapping the images in a div and setting the div's display to block , but this didn't work either.
is there any alternative to find image original size when accordion applied?
<div id="accordion">
<h3>Click me</h3>
<div>
<div class="bg">
<img src="your_img_url">
</div>
</div>
<h3>Click me</h3>
<div>
<div class="bg">
<img src="your_img_url"/>
</div>
</div>
</div>
$(document).ready(function() {
$('#accordion').accordion({
autoHeight: false,
collapsible: true,
});
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});

Setting a specific width and height on the images will return that width and height. This can be done in CSS or using the width and height attributes on the <img> element.
Changing your images to <img src="your_img_url" style="height: 20px; width: 20px;"> should work.
If you need original width, you could do something like this:
var img = $('img').clone().appendTo('body').hide();
img.load(function () {
alert($(this).width());
alert($(this).height());
});
This answer has more detailed information on how to get the original size.

Works for me!
Do you have accordion plugin?
if not: http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
is it added to script?
yo should remove last , to collapsible: true,
it sould look like this:
$(document).ready(function() {
$('#accordion').accordion({
autoHeight: false,
collapsible: true
});
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
But it works anyways!

jquery slider up and down

I am having problems with a jQuery slidedown and slideUp function. When clicking the button the div slides down to reveal more content - however when it slides down it goes half way down smoothly then it likes stutters - but when i click less info to take the div back up it goes up in a smooth transition. How can i make sure it slides down smoothly without no interruptions in the transition?
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
$(".inner p:gt(2)").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner p:gt(2)').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner p:gt(2)').slideUp(1000);
$(this).text("More info");
}
);
});
</script>
HTML/.NET Coding
<div class="slideContent">
<div class="inner">
<energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" />
</div>
</div>
<div class="clear-me"></div>
<div class="btnMoreInfo">
<a class="moreInfoLink" href="javascript:;">More Information</a>
</div>

Not sure if a solution to your problem but just for a good practice, store your selections in variables and use them instead, that way jQuery wouldn't need to find elements every time toggle function is called:
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
var content = $('.inner p:gt(2)'); // storing selection
content.hide(0);
$('a.moreInfoLink').toggle(
function () {
content.slideDown(1000);
$(this).text("Less info");
},
function () {
content.slideUp(1000);
$(this).text("More info");
}
);
});
</script>

The problem is one of performance - browsers can get bogged down when trying to animate multiple elements at a time, particularly if those elements cause the document to be 'reflowed'. Essentially, your selector $('.inner p:gt(2)') is causing all the <p> elements to be animated independently, and each one causes a document reflow at every point.
For a smooth transition, try animating a single containing element that wraps everything you want to be shown/hidden. I would use HTML something like:
<div class="slideContent">
<div class="inner">
<p>Something</p>
<p>Something</p>
<div class="fullInfo">
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
</div>
</div>
<div class="btnMoreInfo">
<a class="moreInfoLink">More Information</a>
</div>
And JS like:
$(".inner .fullInfo").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner .fullInfo').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner .fullInfo').slideUp(1000);
$(this).text("More info");
}
);
This way, the browser is only animating one element at a time - much faster!