I have a search button on the top left which is making my search bar toggle. What i want to achieve here is this.
I basically want the search bar to be the same width as the "welcome" header right above it. the Welcome is not inside a header tag it is actually inside a list tag.
Here is the fiddle i have created.
This is what i tried.
$(document).ready( function () {
var x = $("#page2content :ul").width();
$("#example_filter").css('width', 'x');
});
I basically want to get the width of the welcome header width and store it in a var
and then pass that var in to the css width of the search bar. can anyone please advice what i did wrong? Please also can u give me a smilar solution as i dont want to change the width of the search bar by css directly i want to set its css via jquery. Thanks.
1- This selector is incorrect #page2content :ul, remove the :, so #page2content ul
2- The returned x is a number, you will need to add px to it to make it a valid CSS property. And you will need to target the input
var x = $("#page2content ul").width();
$("#example_filter label input").css('width', x + 'px');
Related
Hi I used this plugin to make all the div equal on height.
https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
$('.item-container').responsiveEqualHeightGrid();
My problem is, I want the child div inside of the parent div calculate also.
For example. I want all add to cart button on the bottom same on first two columns. They will get the highest height.The first DETAIL will be the children div to make the add to cart button go down. Can someone help me?
Thanks
inside this method: responsiveEqualHeightGrid
write something that will adjust height of bottom child div like:
responsiveEqualHeightGrid(){
var itemContainerHeightThatYouCalculatedBefore; //code of your method that calculate item-container responsive height
var imageHeight = $('.item-container img').outerHeight;
var calculateBottomContainerHeightWithAddButton = itemContainerHeightThatYouCalculatedBefore - imageHeight;
$('.item-container .bottomContainerWithAddButton').outerHeight = calculateBottomContainerHeightWithAddButton;
}
I have a div tag on my page.
<div id="filterDropdowns"></div>
I made html markup in my javascript and then inserted into div.
var markup = "";
markup = //Here makup is created through some logic.
$("#filterDropdowns").html(markup); //Inserted html
Everything is working fine.After this, when i trying to get the height of "filterdropdown", it's always 0. I have tried many ways to get the height but i am unable to get the height. I have tried jquery method like innerheight,outerHeight and javascript method as well but it always zero. How i can get the height?
try this for get height via jQuery :
alert($("#filterDropdowns").find("div").height());
height: auto; wont work. The div created by your logic, add height:inherit; to that div and also give a constant height to you #filterDropdowns It needs a height. If parent is 0 the child cannot inherit the height. So either specify a height in your div created your logic or inherit the parents height.
This code will give you the height:
$("#filterDropdowns").height()
Simple as that. No matter how the content was inserted. Dynamically or not.
However, please consider the following:
1) Make sure you check the height of the element really after you had already inserted its content. If you check the height before adding the content then, well, an empty element's height is most likely 0 (unless it is styled somehow).
2) Make sure the element is visible at the time you are checking the height, otherwise the result of the height method might be at least inaccurate.
3) If the contents of the element is positioned absolutely or floating then the height of the element will actually remain 0.
<div id="filterDropdowns" style="height:auto"></div>
try this
Try to this solution
var currentHeight = 0;
$(window).load(function() {
currentHeight = $('#filterDropdowns').outerHeight();
console.log("set current height on load = " + currentHeight)
});
Try this
html:
<div id="filterDropdowns" style="display:inline-block;height:auto"></div>
js:
$("#filterDropdowns").height()
Try jquery's .attr() function.
then, Write $('#filterDropdowns').attr('height','yourvalue');
I have a problem. I have the following code in jsFiddle: https://jsfiddle.net/o7x14gzd/1/ for a creation of a button to read more with jquery.
var $el, $ps, $up, totalHeight;
It should slide down the text til the end and fade out. More information on this site: https://css-tricks.com/text-fade-read-more/
I do not know where it is wrong but when the text is too big it does not show anything when you click "Read More".
Some of you already faced something like this or can tell me where is the error?
1- You have to use outerHeight(true) instead of outerHeight() to calculate the real size of Paragraphs containing Margins.
2- instead of calculating all heights specially if you have list or images , I suggest this method:
put the current height of parent element is a class say startheight and assign it to your view:
.srartheight{height:150px;}
to calculate the final height , use this method:
finalheight=$("#view").removeClass("startheight").height();
$("#view").addClass("startheight");
I am building a site with a right aligned nav.
The last menu item drop down runs off the page as it is positioned absolute to the left of its parent.
I am trying to create a solution for my menu below.
jsfiddle -http://jsfiddle.net/ashconnolly/6gjVr/
I cannot hardcode the pos left -xx style, because the width of the last menu item will vary (due to the text inside it), hence my use of js.
I've nearly cracked it, but i just need to apply a variable as a position absolute left style only on hover.
There maybe a better css only solution, but i couldn't find one.
Any help is appreciated! :D
Edit: updated explanation.
You have already calculated the left of your last menu, why didn't you use?
$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
$("#last-menu-item").mouseenter(function(){
$("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").css({'display':'none'});
});
});
Check Here
As you probably already know, it is bad practice to "print" javascript values using a framework. It will pretty soon become unmaintainable.
But you can separate (element) logic from (element) presentation, i.e. print/format html elements in your templates by setting a data-attribute like this in your html:
<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">
Then change your javascript to:
// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");
// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));
// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()
// show/hide
// ...
You can also do the offset calculations in javascript and only specify position in your templates
Fiddle at: http://jsfiddle.net/cYsp6/7/
I cant Make with css
$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
$("#last-menu-item-drop-down").css('position','absolute').css('left',a);
$("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").hide();
});
Updated Fiddle:
Fiddle
I want to print the page (div) if there is no horizontal scroll appear for that div.
I have a div (1000px) with dynamic data which having property overflow:auto;. So, I want to print the div only if div's width is not getting crossed.
to achieve this i used following method of a Javascript
var curr_width = parseInt(mydiv.style.width);
But it gives 1000px; only although I can see horizontal scrollbar for the div.
What should I do to achieve this?
Can I check whether horizontal scrollbar is appear for the div or not?
Any help is appreciated.
NOTE: I don't want to use any Javascript library.
scrollWidth, clientWidth did the trick
var mydiv = document.getElementById("grid_print");
if (mydiv.scrollWidth > mydiv.clientWidth){
alert("limit exceeds")
}