I am trying to check which div has bigger height and than place a class inside the one that is greater.
I have this code
$(document).ready(function () {
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();
if (sideNavMenu > mainColumn)
{
$(".col-md-3").addClass('dotRight');
}
else
{
$(".col-md-9").addClass('dotLeft');
}
});
The goal here is to check if sideNavMenu is greater than mainColumn than place dotRight on its div tag.
If the mainColumn is greater, then place dotLeft on its div tag.
But its not working.
Any suggestion how to change/improve it.
Thanks a lot
You should reference these by IDs and not classes, since there can be multiple elements with these class names on the page. There should only be one with each ID.
$(document).ready(function () {
var sideNavMenu = $("#sidebar").height();
var mainColumn = $("#main").height();
if (sideNavMenu > mainColumn) {
$("#sidebar").addClass('dotRight');
} else {
$(".#main").addClass('dotLeft');
}
});
Of course, you need to add the id's to your <div>s respectively.
The jQuery docs say:
Get the current computed height for the first element in the set of matched elements or set the height of every matched element.
But, I was just playing with it in jsfiddle and it seems to return an object containing the height of the first element.
http://jsfiddle.net/wwx2m/2/
Which means you should be able to do:
$(document).ready(function () {
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();
if (JSON.stringify(sideNavMenu) > JSON.stringify(mainColumn)) {
$(".col-md-3").addClass('dotRight');
} else {
$(".col-md-9").addClass('dotLeft');
}
});
But the first way I said is preferred. This is not stable, since there can be more objects introduced with the same class. The only reason I'm even mentioning it is to explain why you were having problems with your original code. :)
http://jsfiddle.net/wwx2m/4/
I put the jsfiddle together for you
<html>
<div class='col-md-3'>
</div>
<div class='col-md-9'>
</div>
<script>
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();
if (sideNavMenu > mainColumn){
$(".col-md-3").addClass('dotRight');
}
else{
$(".col-md-9").addClass('dotLeft');
}
jsFiddle
updated jsFiddle with Animation
Related
I'm trying to get this jQuery parallax code to work but I don't want to spaghetti everything. How can it be looped to apply to multiple element IDs?
(it doesn't work with classes because the function needs to run multiple times specific to each particular div) - I'm not very good when it comes to looping, still learning how to do this stuff.
Anyway, this is a functioning code for one section (a div with a child div, #about > #pAbout in this instance):
$(document).ready(function() {
if ($("#pAbout").length) {
parallax();
}
});
$(window).scroll(function(e) {
if ($("#pAbout").length) {
parallax();
}
});
function parallax(){
if( $("#pAbout").length > 0 ) {
var plxBackground = $("#pAbout");
var plxWindow = $("#about");
var plxWindowTopToPageTop = $(plxWindow).offset().top;
var windowTopToPageTop = $(window).scrollTop();
var plxWindowTopToWindowTop = plxWindowTopToPageTop - windowTopToPageTop;
var plxBackgroundTopToPageTop = $(plxBackground).offset().top;
var windowInnerHeight = window.innerHeight;
var plxBackgroundTopToWindowTop = plxBackgroundTopToPageTop - windowTopToPageTop;
var plxBackgroundTopToWindowBottom = windowInnerHeight - plxBackgroundTopToWindowTop;
var plxSpeed = 0.35;
plxBackground.css('top', - (plxWindowTopToWindowTop * plxSpeed) + 'px');
}
}
I was hoping to create an array like this:
var ids = ['#pAbout', '#pConcept', '#pBroadcast', '#pDigital', '#pDesign', '#pContact'];
But I can't get the e business to work unfortunately, it's very frustrating for me. Any help would be greatly appreciated!
You can use multiple selector in jQuery to select disparate elements by simply using a comma between the selectors.
$("#pAbout, #pConcept, #pBroadcast, #pDigital, #pDesign, #pContact")
.each(function(){
//manipulate element here
});
That each() iterates over all matched elements so no need to check for length etc.
hello everyone javascript don't add the class to html
$(".ocmessage").each(function(){
var text = $(this).find('p').html();
if(strpos(text,"<b>"+name+"</b>")!==false) $(this).addClass("quoteme");
});
this code should detect if in <p>...</p> there are name of some member and if there is javascript should add class quoteme
how can i fix it?
I think you mean this. BTW, name isn't defined.
var name = ''; // change the value
if(text.indexOf("<b>"+name+"</b>") > -1) {
$(this).addClass("quoteme");
}
Assuming ocmessage is a div or another contain class.
Take a look at : http://jsfiddle.net/40vv7dbk/
$(".ocmessage").each(function () {
var $this = $(this);
var text = $this.find('p').html();
var name = "Ben"
// Will be -1 if not found.
if (text.indexOf(name) > -1) {
$this.addClass("quoteme");
}
});
What it is doing, is when the document is ready, going through all the Divs with the class ocmessage, looking for a tag, and then checking if a name is in there. If it does, I add the class quoteme.
Your elements with class ocmessage may contain more than one paragraph. So inside the first each-loop we have to do a second loop through all <p> like so:
$(".ocmessage").each(function(){
var $T = $(this);
$T.find('p').each(function() {
var text = $(this).html();
// find username and prevent multiple class adding
if(text.indexOf("<b>"+name+"</b>") > -1) {
$T.addClass("quoteme"); return false; // stop loop when class is added
}
});
});
Working FIDDLE here. Credits to Amit Joki.
This is a very poor way to accomplish the task. Here's the more standard jquery way to do it.
$(".ocmessage").has('p b:contains('+name+')').addClass("quoteme");
I'm trying to figure out how to code my following theory in jquery but i'm having trouble since im more of a front end designer/developer, i don't deal very much with comparing/parsing.
I have a div(#product) that contains 2 spans. 1 span that contains a number('.price-ship-1') and another hidden span that also contains a number ('.price-ship-2').
'.price-ship-1' always exists, and '.price-ship-2' exists some of the time; How do i check to see if both exist at the same time within '#product'?
If only '.price-ship-1' exists, base my number parsing from that number and display a hidden div. But if both exist, base my number parsing on '.price-ship-2' and add a class.
Currently i'm only checking 1 number and adding a class to another div but now need to check an additional number and add a class but i'm not sure how to write it. I realize i don't need the check below since '.price-ship-1' always exists, its only in there because I was trying to write it myself, but to no avail.
my current script is as follows:
if ($('.promo-ship-1').length){
$('.promo-ship-1').each(function(){
var $this = jQuery(this);
var number=$this.html();
number=number.substring(1);
number=parseFloat(number);
if(number > 99){$this.parents('.ship-banner').addClass('test123');}
});
}
Thank you for your time!
UPDATE:
i inherited the code and don't know it 100% yet. reading deeper into it, my issue is actually more complex than i initially thought... i may have to close the question for my purpose, but im sure somebody else may find it useful.
Based on what you've shared I've written a piece of code that would simulate your scenario. I believe you can use most of it in your own code:
$(function () {
// Just to work out the elements existence and visibility.
function calculate() {
var prod = $('#product');
var span1 = prod.find('.price-ship-1');
var span2 = span1.siblings('.price-ship-2');
var p = $('p');
if (span2.length <= 0) {
// Second element isn't there.
p.text('Second element is not there');
}
else if (span2.is(':visible')) {
// Second element is there and is visible.
p.text('Second element is there and is visible');
}
else {
// Second element is there and is invisible.
p.text('Second element is there and is invisible');
}
}
$('button').on('click', function () {
var op = $(this).data('id');
var el = $('#product .price-ship-2');
switch (op) {
case 'show':
el.show();
break;
case 'hide':
el.hide();
break;
case 'remove':
el.remove();
break;
case 'add':
$('<span>', {
class: 'price-ship-2'
}).text('50.00').appendTo($('#product')).show();
}
calculate();
});
calculate();
});
.price-ship-2 {
display: none;
}
#product {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<span class="price-ship-1">100.00</span>
<span class="price-ship-2">50.00</span>
</div>
<button data-id="show">Show price-ship-2</button>
<button data-id="hide">Hide price-ship-2</button>
<button data-id="remove">Remove price-ship-2</button>
<button data-id="add">Add price-ship-2</button>
<p></p>
Demo jsFiddle
check if $('#product').find('span').length is 1 or 2
depending upon the value you can parse the number and manipulate both the divs. There is no need for each statement.
if you want to check the existence of both price-ship-1 and price-ship-2 and both are beneath a div with id #product then it is more simple.
//try to only query the dom once, it is an expensive op
var productDiv = $('#product')
if (productDiv.length) {
productDiv.each(function () {
var $this = jQuery(this);
var priceShip2 = $('.price-ship-2', $this)
if (priceShip2.length) {
//PRICE 2 EXISTS
} else {
//ONLY PRICE 1 EXISTS
}
});
}
I need the class inside of the <li> tag to be auto height/adjustable to its <li>, however it wasn't possible with CSS(height:auto;height:100% and other options) so I tried jQuery but I'm a newbie so I tried what I've learned so far. The following code does just what I need but I wasn't able to figure out how to set the auto height for the class on page load instead of .click function. Please note that I have many <li> tags with different sizes so (this) needs to be included.
$j("#accordion ul li").click(function () {
var current = $j(this).height() - 2;
$j(this).find(".status-green").attr("style","height:" + current + "px");
});
Thanks in advance
$j(function () {
$('#accordion').find('.status-green').each(function (index, value) {
var $value = $j(value),
h = $value.parents('li').height() - 2;
$value.height(h);
});
});
This will find and iterate through each .status-green element within the #accordion element when the DOM is ready ($j(function(){}); is short-hand for $j(document).ready(function(){});).
--Update--
This more closely resembles your code:
$j(function ($) {
$("#accordion").find('li').each(function (index, value) {
var $value = $(value),
current = $value.height() - 2;
$value.find(".status-green").height(current);
});
});
If you pass $ as a argument in the first line then you can use $() rather than $j(). Also the .height() function assumes pixels if only a number is passed to it.
The below code works properly, but it is hard coded. I would like to be able to create an array of field sets, hide those fields, then each time I click on the "#createEventForm-eventInformation-addElement" button it displays the next one. The problem with the below code is that it is hard coded and thus would break easily and be much larger than using loops. Can someone help me make this better.
$("#fieldset-group1").hide();
$("#fieldset-group2").hide();
$("#fieldset-group3").hide();
$("#fieldset-group4").hide();
$("#fieldset-group5").hide();
$("#fieldset-group6").hide();
$("#fieldset-group7").hide();
$("#fieldset-group8").hide();
$("#fieldset-group9").hide();
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
if($("#fieldset-group1").is(":hidden"))
{
$("#fieldset-group1").show();
}
else
{
$("#fieldset-group2").show();
}
}
);
You should use the ^= notation of the jquery selectors which means starting with ..
// this will hide all of your fieldset groups
$('[id^="fieldset-group"]').hide();
Then
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
// find the visible one (current)
var current = $('[id^="fieldset-group"]:visible');
// find its index
var index = $('[id^="fieldset-group"]').index( current );
// hide the current one
current.hide();
// show the next one
$('[id^="fieldset-group"]').eq(index+1).show();
}
);
A quick idea.
Add a class to each fieldset lets say "hiddenfields". Declare a global variable to keep track of which field is shown.
$(".hiddenfields").hide();//hide all
var num = 0;//none shown
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
num++;
$("#fieldset-group" + num).show();
}
);
Here is one simple solution.
var index = 0;
var fieldsets = [
$("#fieldset-group1").show(),
$("#fieldset-group2"),
$("#fieldset-group3"),
$("#fieldset-group4"),
$("#fieldset-group5"),
$("#fieldset-group6"),
$("#fieldset-group7"),
$("#fieldset-group8"),
$("#fieldset-group9")
];
$("#createEventForm-eventInformation-addElement").click(function() {
ajaxAddEventInformation();
fieldsets[index++].hide();
if (index < fieldsets.length) {
fieldsets[index].show();
}
else {
index = 0;
fieldsets[index].show();
}
});
Add a class 'fieldset' to all fieldsets, then:
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
$('.fieldset').is(':visible')
.next().show().end()
.hide();
}
);
This will show the first hidden fieldset element whose ID attribute starts with "fieldset-group"...
$("fieldset[id^='fieldset-group']:hidden:first").show();
How about to add (or only use) a class for that fields?
$(".fieldset").hide(); // hides every element with class fieldset
$("#createEventForm-eventInformation-addElement").click( function() {
ajaxAddEventInformation();
// I assume that all fieldset elements are in one container #parentdiv
// gets the first of all remaining hidden fieldsets and shows it
$('#parentdiv').find('.fieldsset:hidden:first').show();
});