How can I add value "auto" to a div?Jquery - javascript

CODE JS:
$('.i_admin_user a').click(function(){
var liHeight = $('.subMenu-1 > li').height() - 1;
var subMenuHeight = 344; //here I want auto value;
$(this).parent().siblings('li').children('.subMenu-1').animate({height:0},300);
$(this).siblings('.subMenu-1').animate({ height: subMenuHeight + 'px'},300)
.addClass('active-submenu');
if( $('.subMenu-1').hasClass('active-submenu')){
$(this).siblings('.subMenu-1').removeClass('active-submenu');
}else{
}
});
How can I modify my code so they accept and value "auto".
Basically I want instead of value 344 to put the value auto
I tried the next version but does not work (in this case the height of the return is 0)
var subMenuHeight = "auto";
Can you please tell me a solution to this problem?
Thank you!

If you want to set the height to auto, you'll have to remove px.
Like so:
var subMenuHeight = 'auto'; // auto value here
$(this).siblings('.subMenu-1').animate({ height: subMenuHeight},300).addClass('active-submenu');
If you don't remove px, it won't regonize auto, because the value is then autopx.

You can try this:
$(this).siblings('.subMenu-1').animate( height:auto},300).addClass('active-submenu');

Related

Replace url (window.location) when div height gets bigger than 50px

Newbie here. I'm trying to change the website's page/url using window.location.replace when div #valor height gets bigger than 50px.
Details:
This div #valor increases its height on each click. But when it achieves at least 50px, I need to redirect the user to another page.
I've tried a lot of different approaches but I know that there's something missing on each one. I'll list them below for reference. I do think that the problem is with the way I structure my code...
var maskHeight = $("#valor").css('height');
if (maskHeight > 50){
window.location.replace("https://google.com");
}
else {
alert("if I'm here it means it didn't work"); //just testing
}
});
And I have a lot of different options that didn't work but they all have this if statement:
if ($('#valor').height() > 40) {
window.location.replace("https://google.com");
}
I've also tried something like this:
var div = $("#valor").height();
var win = 50;
if (div > win ) {
window.location.replace("https://google.com");
}
My first approach, not listed here, didn't work because it compared the value right on the first click. And I just want to make something like: when #valor height gets bigger than/achieves 50px > change url.
Thank you in advance! Any help is very much appreciated.
you compare a string with (for example) 10px with an integer:
var maskHeight = $("#valor").css('height'); // output for example 10px
if (maskHeight > 40){ . //than you compare it if(40px > 40)
window.location.replace("https://google.com");
}
change your var to:
var maskHeight = $("#valor").height();
ok you edited your post:
can you show us your click handler function?
I think this is the right way you have do do it:
var maskHeight = $("#valor").height();
$("#valor").on('click', function()
maskHeight = maskHeight + 10;
if (maskHeight > 40){
window.location.replace("https://google.com");
}
else
{
alert("if I'm here it means it didn't work"); //just testing
}
});

Jquery horizontal slide based on div width

I have jquery script where you can click a left and right button and it will scroll horizontally to show more content.
The content that needs to be scrolled are in a div with a width of 1296px, but i want to set my jquery code to automatically get the width of the div and when you press on one of the left or right scroll button it will scroll exactly 1296px.
I want to do it this way because I need to later on optimize the design for all screen size and this would be the easier way.
My code:
var $item2 = $('div.group'), //Cache your DOM selector
visible2 = 1, //Set the number of items that will be visible
index2 = 0, //Starting index
endIndex2 = ( $item.length ); //End index
$('#arrowR').click(function(){
index2++;
$item2.animate({'left':'-=1296px'});
});
$('#arrowL').click(function(){
if(index2 > 0){
index2--;
$item2.animate({'left':'+=18.5%'});
}
});
This Javascript should work:
var $item2 = $('div.group'), //Cache your DOM selector
visible2 = 1, //Set the number of items that will be visible
index2 = 0, //Starting index
endIndex2 = ( $item2.length ); //End index
var w = $("#group").width();
$('#arrowR').click(function(){
index2++;
$item2.animate({'left':'-=' + w + 'px'});
});
$('#arrowL').click(function(){
if(index2 > 0){
index2--;
$item2.animate({'left':'+=' + w + 'px'});
}
});
Check this fiddle. Basically we calculate the width initially to not do the same thing repeatedly and the reuse it whenever we need it.
Why not get the width of the visible container first, and then use that value later? Quick example:
var width = $('container').width();
And then during animations:
var left = $item2.css('left') + width;
$item.animate({'left',left});
As a note, innerWidth and outerWidth may be more beneficial than just width depending on how you've set everything up, so if values aren't quite right take a look at those documents.
I've created a fiddle that I think solves your problem:
http://jsfiddle.net/77bvnw3n/
What I did was to create another variable (called width) which on page load, dynamically gets the width of the container.
var width = $('.group-container').width(); //Container Width
This variable is also reset whenever the Next or Previous buttons are pressed (in case the window has been resized since the page loaded).
$('#arrowR').click(function(){
index2++;
//recheck container width
width = $('.group-container').width();
$item2.animate({'left':'-=' + width + 'px'});
});
Take a look and let me know if it helps.
Note: I replaced the 'Next' and 'Previous' images with coloured boxes in my Fiddle and I think you also had a typo in your code, should
endIndex2 = ( $item.length )
be changed to:
endIndex2 = ( $item2.length )

Extend Existing CSS style by percent- % using JQuery

I am trying to extend an existing css style by 1%, using the following code, but instead its being increment in pixels instead of %.So instead of giving - 7%, its giving me it as 7px.
$("#label").css("top", "+=1%");
The top most div is of size - width: 100%; and the label top : 6% which is already defined.
Any idea/suggestion on this would be really helpful
You can try to get the current top property value, and then add 1%;
var currentTop = $("#label").css("top");
var topAdded = parseInt(currentTop.replace("%","")) + 1;
$("#label").css("top", topAdded + "%");
You can do this:
var top = parseInt($("#label").css("top").replace("%", ""));
top ++;
$("#label").css("top", top+"%")
Update:
For one line statement you can do this:
$("#label").css("top", (parseInt($("#label").css("top").replace("%", "")+1)+"%")

if-image-height JavaScript statement

I have a grid of several images on my website. Hovering on one of these images will display a label with a name and price. The problem is that some images have a smaller height, and then the label gets too close to the bottom. Now I'm trying to write a JS if-statement in order to decrease the margin-top of that label only if the image-height is less than 200px.
This is how my html looks like:
<div class="fw_preview_wrapper">
<img src="'.$row['imageURL'].'" alt="" class="fw_featured_image" id="product_image" width="540">
<span class="price_tag" id="price_tag"><span class="actual_price">€ '.$row['Price'].'</span>
As you can see, the image URL is variable and comes from a database via php. For the js function, I set id="product_image".
This is the CSS part:
span.price_tag {
top: 86%;
}
As you can see above, there is a margin top set to 86%. This very value needs to be changed to "80%" when an image has a height of less than 200px.
and finally, the JS part:
<script>
var img = document.getElementById('#product_image');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
if(height < 200){
$("span.price_tag").css('top','80%');
}
</script>
It doesn't work. I would appreciate some help. Thanks in advance!
Don't use hash # within param for getElementById:
var img = document.getElementById('product_image');
However you're using jQuery too, seeing your code, why not do just like this:
var img = $('#product_image');
var width = img.width();
var height = img.height();
if(height < 200){
$("span.price_tag").css('top','80%');
}
in javascript you should be using:
var img = document.getElementById('product_image');
# is used in jquery like: var img = $("#product_image")
remove # from the element getting statement , we use # to specify id in Jquery and not in js
try this..
<script type="text/javascript">
var img = document.getElementById('product_image');
var width = img.clientWidth;
var height = img.clientHeight;
if(height < 200)
$("span.price_tag").css('top','80%');
</script>

How to get width in percentage using jquery

I am trying to get value of the width in percentage using j-Query.
I don't want to set value of in j-Query.I had tried width() method and css('width').They both return not return the result in percentage.
Html-Code
style.css
.demo{
width:50%;
}
jquery Code
$(document).ready(function(){
var = $('.demo').css('width');//50px
var = $('.demo').width();//50
});
Thanks in advance for help.
$(function() {
var parentWidth = $(document).width(); // parent element
var demoWidth = ($(".demo").width()/parentWidth * 100).toFixed() +"%";
});
This would give you width in %

Categories