I have 3 blocks of images with text on top of them. Here is how one of the 3 looks like.
<div class="lp">
<h2 class="align-vert">
This is my title
</h2>
</div>
I want to get the title height(); in jQuery and apply it to the aligh-v. I tried the following jQuery code but it doesn't work.
jQuery.each(jQuery('.js-vert'), function() {
jQuery(this).css({
"margin-top": '"' + jQuery('.js-vert').height() + '"'
});
});
The issue is because you need to use the this reference within the each() method to refer to the current element. As it stands, your code is calling height() the entire set of elements which means only the height of the first element is returned. Your syntax of string concatenation is also a little off. Try this:
$('.js-vert').each(function() {
$(this).css("margin-top", $(this).height());
});
Also note that this can be made more succinct by removing the each() loop entirely and passing a function to the css() method which returns the value needed:
$('.js-vert').css('margin-top', function() {
return $(this).height();
});
Related
This Code is good Working for background size inline css ex:
style="background-size:cover"
$(".tp-sliderSection .item").css('background-size', function(){
$(this).css('background-size',$(this).data("bg-size"));
});
<div data-bg-size="cover"></div>
But I need to use it
$(".tp-sliderSection .item").css('background-size', function(){
$(this).css('background-size',$(this).data("bg-size"));
$(this).css('-webkit-background-size',$(this).data("bg-size"));
$(this).css('-moz-background-size',$(this).data("bg-size"));
});
Output css style I need
style="background-size:cover; -webkit-background-size:cover; -moz-background-size:cover"
ETC
Your original code should have been working fine, but in case it didn't, you can try .attr(). I had often seen that sometimes there's a problem with .data() but .attr() seems to be the fix.
Also read: http://api.jquery.com/css/:
As of jQuery 1.8, the .css() setter will automatically take care of prefixing the property name. For example, take .css( "user-select", "none" ) in Chrome/Safari will set it as -webkit-user-select, Firefox will use -moz-user-select, and IE10 will use -ms-user-select.
Also one thing that is going wrong is returning. You just need to return the bg-size whereas you are setting it there. You had already made the function of background-size and now you just need to return the color. Have a look here: http://jsbin.com/xurevijunu/edit?html,css,js,console,output
As of jQuery 1.4, .css() allows us to pass a function as the property value:
$( "div.example" ).css( "width", function( index ) {
return index * 50;
});
This example sets the widths of the matched elements to incrementally
larger values.
Note: If nothing is returned in the setter function (ie. function(
index, style ){} ), or if undefined is returned, the current value is
not changed. This is useful for selectively setting values only when
certain criteria are met.
So, you can try:
$(".tp-sliderSection .item").css('background-size', function(){
return $(this).attr("data-bg-size");
});
Try something like this. You can bracket the css with this syntax...
$(".tp-sliderSection .item").css('background-size', function(){
$(this).css({ 'background-size’ : $(this).data('bg-size’),‘-webkit-background-size' : $(this).data('bg-size’), '-moz-background-size’ : $(this).data('bg-size') });
});
I want to find a specific word resulted from search and scroll to it using window.find()
How to use window.find() in a specific div not all page?
* This is not vanilla JavaScript *
What you should do is cache the div element in a variable and then add a function like so
(function($) {
$.fn.goTo = function() {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'fast');
return this;
}})(jQuery);
Which can then be used by selecting your element with jQuery and will automatically focus to it. That's half of it solved for you
Next I would use something like what's used in this link to do the highlighting of the specific string highlight text tutorial.
And then the simplest part is finding the string in your div. What you would do is take the length of the string you are finding and use that value like so.
var sub = find.length //The string you are looking for
element.substring(element.indexOf(find, sub);
This is assuming your div doesn't contain child elements. Otherwise you would have to modify it to loop through the list of child elements and check each child element with the find method stated above. Not much of a change, but still a change.
Hope this helped
I have 8 divs with id="div1","div2","div3".... and a class=divs. I also have a button with class="div1","div2","div3"......
When I click the button with id="div1", it will first remove all the class="selected" to all div that has a class="divs" then only the div with id="div1" will have the class selected. And so on.....
I want to use document.getElementByClass() for removing class but it don't work in my FIDDLE. :(
Instead, Im forced to use document.getElementsByClassName()[]. But it seems so hard to code since it requires me to put the specific arrays for the classname.
This is exactly I want to achieve FIDDLE
There is no getElementByClass for a reason: unlike id, class is not specified to be unique in a document. Which element would you get? No, you need the ability to get all of them. And if you get an array, that's solved by looping, not by repeating rows for each index:
However, your design is inefficient; and if you're already using jQuery, you can write it very tightly. This would be better:
<button class="divbuttons" data-div="div1">div1</button>
<button class="divbuttons" data-div="div2">div2</button>
...
then you can:
$(document).ready(function(){
$('.divbuttons').click(function() {
var div = $(this).data("div");
$('.divs.selected').removeClass('selected');
$('#' + div).addClass('selected');
});
});
This is an easy one. There is no document.getElementByClass
You have document.getElementById or document.getElementByClassName
There's no such thing as getElementByClass() because multiple elements can have the same class. There's getElementById() (elements have unique ids, or at least they're supposed to) and getElementsByClassName(), which returns an array of all elements that match the class specified.
try
$(document).ready(function () {
$("button[class^=div]").click(function () {
$(".divs.selected").removeClass("selected");
$("#" + $(this).attr("class")).addClass("selected");
});
});
DEMO
I know this is supposed to be simple, but I'm running into multiple problems. First of all, I don't know how to get all elements of a class and change their display. I found the .each method with this sample code:
$('.classname').each(function(index) {
alert(index);
});
What do I need instead of the alert to change the display property of an element from 'none' to block'?
The second problem is, the class name is gathered from a hidden field. Let's name this variable service. When I try to replace the '.classname' with '.'+service I get an error saying 'Syntax error, unrecognized expression: .'.
So the actual code would be something like:
var service=$('#service').val();
$('.'+service).each(function(index) {
alert(index);
});
I'm sure this can't be complicated but I can't figure it out.
Any alternative solution is of course welcome.
Check out .show:
var service=$('#service').val();
$('.'+service).show(); // roughly equivalent to .css('display', 'block');
However, as the documentation for show points out, the method returns the matched elements display property to it's previous state. To explicitly change the display style property to block, use .css:
$('.' + service).css("display", "block");
try fadeIn() and fadeOut()
var service=$("#service").val();
$("."+service).fadeIn();
How can I make a function for one element, like the each() does it for multiple elements?
What I want to do, (just for the sake of the example)
$(".element").each(function () {
var height = $(this).height();
$(this).css("bottom", "-" + height + "px");
});
Should I just use the Each() or should I use one()?
Just call the .css function if you only want to do it once. You can pass an anonymous function as the second paramter in order to do what you're trying to do.
Just remember that this will still do the action to every element that matches your selector. If you only want to apply this to one element, you need to be more specific with your selector.
$(".element").css("bottom", function() {
return "-" + $(this).height() + "px");
});
each() will works fine also for collections with one element only, but in this case it is not really necessary and for one element introduces only overhead so it's better simply write
var height = $(".element").height();
$(".element").css("bottom", "-" + height + "px");
also note that one() is not an alternative because its purpose is to attach an handler that has to be called one time only
jQuery each will work perfectly with just the one element in it. So you can go ahead and use .each safely
like this?
$(".element").css("bottom", "-" + $(this).height() + "px");
It doesn't need to be in a function