Here is my Markup. I want to update/replace class name col-sm-3
to col-md-6 on widow resize (ex: width < 800)
<div class="llotherlogos-userthumb">
<div class="col-sm-3">
<div class="logo-thumb">
<img class="img-fluid" src="images/logos/logo-seven.jpg" alt="">
<div class="logo-caption">
<div class="ll-category">Business</div>
<div class="ll-price"><span>1000BDT</span>5000 BDT</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="logo-thumb">
<img class="img-fluid" src="images/logos/logo-eight.jpg" alt="">
<div class="logo-caption">
<div class="ll-category">Business</div>
<div class="ll-price"><span>1000BDT</span>5000 BDT</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="logo-thumb">
<img class="img-fluid" src="images/logos/logo-nine.jpg" alt="">
<div class="logo-caption">
<div class="ll-category">Business</div>
<div class="ll-price"><span>1000BDT</span>5000 BDT</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="logo-thumb">
<img class="img-fluid" src="images/logos/logo-ten.jpg" alt="">
<div class="logo-caption">
<div class="ll-category">Business</div>
<div class="ll-price"><span>1000BDT</span>5000 BDT</div>
</div>
</div>
</div>
</div>
JavaScript
var otherlogos = function(){
var ww = document.body.clientWidth;
var myLogos = document.querySelectorAll(".llotherlogos-userthumb .col-sm-3");
if(ww < 800){
myLogos.className.replace(col-sm-3, col-md-6);
}
}
window.onresize = otherLogos;
You need this:
myLogos.className.replace(col-sm-3, col-md-6);
To be:
myLogos[0].classList.replace('col-sm-3', 'col-md-6');
(querySelectorAll returns an array of elements, even if only one element matches, hence the need for myLogos[0].)
To do this for multiple elements, you'd need something like this (explicit for loop, because I think foreach doesn't work here):
for (let i = 0; i < myLogos.length; ++i)
myLogos[i].classList.replace('col-sm-3', 'col-md-6');
with jQuery you could do something like this
<script>
$(window).resize(function () {
if($(window).width()<800){
$('.llotherlogos-userthumb').children().removeClass('col-sm-3').addClass('col-md-6');
}else{
$('.llotherlogos-userthumb').children().removeClass('col-md-6').addClass('col-sm-3');
}
});
</script>
You just require to use toggle for achieving the goal. The example is given below:
myLogos.classList.toggle('col-sm-3');
myLogos.classList.toggle('col-md-6');
or
var myLogos = document.querySelectorAll(".llotherlogos-userthumb .col-sm-3");
var classes = myLogos.classList;
var result = classes.replace("col-sm-3", "col-md-6");
console.log(result);
For more info on above access this link
try this jquery code:
enter$( window ).resize(function() {
var ww = document.body.clientWidth;
<==========now select id or element==============>
$("#a1").addClass( "my-hidden").removeClass("my-disply");
// code here
});
Related
I want to load different image on different div clicks. How do I know which div is clicked? Do I have to pass the div class as argument?
<script type="javascript">
function ChangeLibaas() {
}
</script>
<div class="Indeximages">
<img src="images/white.png" id="libaasImage" class="img-responsive jubbahImage" alt="" />
</div>
<div class="col-md-12 nopadding customTabs">
<h2>Pick a Colour</h2>
<div class="col-md-3 colourBlue" onclick="ChangeLibaas()"></div>
<div class="col-md-3 colourBlack" onclick="ChangeLibaas()"></div>
<div class="col-md-3 colourGreen" onclick="ChangeLibaas()"></div>
</div>
Simplest inline: pass (this):
<div class="col-md-3 colourBlue" onclick="ChangeLibaas(this)"></div>
and use it :
function ChangeLibaas(theClickedDiv) {
var img = "images/"+
theClickedDiv.className.split("colour")[1].toLowerCase()+".png"; // take the colour
document.getElementById("libaasImage").src=img;
}
To make it all neater, use an attribute and unobtrusive code
window.onload=function() {
var divs = document.querySelectorAll("div.col-md-3");
for (var i=0;i<divs.length;i++) {
divs[i].onclick=function() {
document.getElementById("libaasImage").src="images/"+
this.getAttribute("data-color")+".png";
}
}
}
using
<div class="col-md-3 colourBlue" data-color="blue""></div>
You can pass as an argument, like this:
<div class="col-md-12 nopadding customTabs">
<h2>Pick a Colour</h2>
<div class="col-md-3 colourBlue" onclick="ChangeLibaas(this)"></div>
<div class="col-md-3 colourBlack" onclick="ChangeLibaas(this)"></div>
<div class="col-md-3 colourGreen" onclick="ChangeLibaas(this)"></div>
</div>
And then:
<script type="javascript">
function ChangeLibaas(sender) {
var div = sender;
}
</script>
But it's better if you use event listeners.
I hope it can be useful:
In your html
<div class="Indeximages">
<img src="images/white.png" id="libaasImage" class="img-responsive jubbahImage" alt="" />
</div>
<div class="col-md-12 nopadding customTabs">
<h2>Pick a Colour</h2>
<button class="col-md-3" data-color="colourBlue" onclick="ChangeLibaas(this)">Blue</div>
<button class="col-md-3" data-color="colourBlack" onclick="ChangeLibaas(this)">Black</div>
<button class="col-md-3" data-color="colorGreen" onclick="ChangeLibaas(this)">Green</div>
</div>
In javascript, code looks like:
function ChangeLibaas(origin) {
var color = origin.dataset.color;
var img = document.getElementById('libaasImage');
img.src = color + ".jpg";
}
I am trying to modify the links in my page using JavaScript. I can select the div and the a element but cannot change the href.
Shopify is using a for loop to generate these objects and need each object to have a different link.
Here is the HTML:
<div id="tri-banner-1" class="banner-element banner-1 col-sm-4">
<a href="collections/all"><div class="home-banner">
<img src='//cdn.shopify.com/s/files/1/1093/4220/t/2/assets/group_top_banner01.png?17711418137279289271' alt="">
<div class="banner-caption">
<div class="display-table">
<div class="display-tablecell">
</div>
</div>
</div>
</div></a>
</div>
<div id="tri-banner-2" class="banner-element banner-2 col-sm-4">
<a href="collections/all"><div class="home-banner">
<img src='//cdn.shopify.com/s/files/1/1093/4220/t/2/assets/group_top_banner02.png?17711418137279289271' alt="">
<div class="banner-caption">
<div class="display-table">
<div class="display-tablecell">
</div>
</div>
</div>
</div></a>
</div>
<div id="tri-banner-3" class="banner-element banner-3 col-sm-4">
<a href="collections/all"><div class="home-banner">
<img src='//cdn.shopify.com/s/files/1/1093/4220/t/2/assets/group_top_banner03.png?17711418137279289271' alt="">
<div class="banner-caption">
<div class="display-table">
<div class="display-tablecell">
</div>
</div>
</div>
</div></a>
</div>
Here is my JavaScript.
<script type="text/javascript">
$(window).bind("load", function() {
window.alert("Test");
var banner1 = document.getElementById("tri-banner-1");
var banner1Links = banner1.getElementsByTagName("a");
banner1Links.href="facebook.com";
});
</script>
banner1.getElementsByTagName("a"); returns an HTMLCollection . You should either select the element using the index ; e.g.;
// set `href` of first `a` element in `bannerLinks`
banner1Links[0].href = "facebook.com";
or iterate the collection
for (var i = 0; i < bannerLinks.length; i++) {
bannerLinks[i] = /* set `href` here */;
}
banner1Links gets an array value so you need to loop in that array and for every array element you pass the value
// instead of banner1Links.href="facebook.com";
for(var i = 0; i < banner1Links.length; i += 1){
banner1Links[i] = 'http://example.com';
}
I am a newbie to JavaScript and I need to use it with bootstrap for my own web page. My question is now how can I make a loop so that pictures names (stored as an array) can emerge in the right places of the HTML code so I do not have to copy the blocks of code for each picture.
For example :
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive" src="01.jpg">
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive" src="01.jpg">
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive" src="02.jpg">
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive" src="03.jpg">
</div>
</div>
As we can see here the only different text is the src.How can I store the names (paths) in an array and make a loop that changes the src property?
Thank you!
Try this demo: http://jsbin.com/pinoxeqapi/1/edit?html,output
I think that's what you're looking for.
CODE
$(function () {
var images = ["01.jpg", "01.jpg", "02.jpg", "03.jpg"];
$.each(images, function (index, element) {
var imgContainer = "<div class='row'><div class='col-md-3 col-xs-6 portfolio-item><img class='img-responsive' src='" + element + "'></div></div>";
$("body").append(imgContainer);
});
});
First Include JQuery (If not)
<script>
var srcArray = ['01.jpg', '02.jpg', '03.jpg', '04.jpg'];
$(document).ready(function () {
for (var i = 0; i < srcArray.length; i++) {
$('div.row img.img-responsive').eq(i).attr("src", srcArray[i]);
}
});
</script>
I would recommend using one of the templating frameworks described in some of the other answers. If you're interested to see how to implement this in pure JS:
var temp = document.querySelector('#portfolio-item-template');
['01.jpg', '02.jpg', '03.jpg', '04.jpg'].forEach(function(src) {
temp.content.querySelector(".img-responsive").src = src;
var newImg = document.importNode(temp.content, true);
document.querySelector('#insertion-point').appendChild(newImg);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template id="portfolio-item-template">
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item">
<img class="img-responsive">
</div>
</div>
</template>
<div id="insertion-point">
</div>
You can use a template stored in the HTML and then generate the actual elements using an array of the image sources. Something like John Resig's micro-templates can achieve this.
<script type="text/template" id="img-tmpl">
<div class="row">
<div class="col-md-3 col-xs-6 portfolio-item>
<img class="img-responsive" src="<%= src %>">
</div>
</div>
</script>
This is the HTML code:
<div id="CurrencyQuotePane">
<div class="CurrencyQuote">
<div class="column">
<div class="form-label">Pair: </div><div>1/2</div>
<div class="form-label padding-top">Spread: </div><div>385</div>
</div>
<div class="column">
<div class="form-label">Rate: </div><div>1/2</div>
<div class="form-label padding-top">High/Low: </div><div>2002.0/0.0055</div>
</div>
</div>
<div class="clear"></div>
</div>
How do I get the 385 in Javascript if it keeps changing?
This is my current javascript:
function getSpread(){
var tag = iframe.contentDocument.getElementByClassName('SPREAD');
var spread = Number(tag[1].innerHTML);
return spread;
}
Sorry if I don't know anything about javascript, I am a complete newbie.
Change it to this:
<div class="column">
<div class="form-label">Pair: </div><div>TEXT</div>
<div class="form-label padding-top">SPREAD</div><div id="spreadval">385</div>
</div>
function getSpread(){
var tag = iframe.contentDocument.getElementById('spreadval');
return parseInt(tag.innerHTML);
}
var column = document.getElementsByClassName('column');
var divs = column[0].getElementsByTagName('div');
alert(divs[1].innerHTML);
set id to your div
<div class="column">
<div class="form-label">Pair: </div><div>TEXT</div>
<div class="form-label padding-top">SPREAD</div><div id="changing_number">385</div>
</div>
get with jquery
$(function(){
var theNumber = parseInt($('#changing_number').text());
});
or with DOM:
$(function(){
var theNumber = parseInt(document.getElementById('changing_number').innerHTML);
});
here you can learn js: http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
I would like to use jQuery to wrap sets of class elements in a div but can't find the solution.
HTML:
<div class="view-content">
<div class="first">content</div>
<div class="first">content</div>
<div class="second">content</div>
<div class="third">content</div>
<div class="third">content</div>
</div>
Desired Result:
<div class="view-content">
<div class="column">
<div class="first">content</div>
<div class="first">content</div>
</div>
<div class="column">
<div class="second">content</div>
</div>
<div class="column">
<div class="third">content</div>
<div class="third">content</div>
</div>
</div>
Demo http://jsfiddle.net/kQz4Z/8/
API: http://api.jquery.com/wrapAll/
Added a break line so that you can see the difference here :) http://jsfiddle.net/kQz4Z/10/
code
$(function() {
$('.first').wrapAll('<div class="column" />')
$('.second').wrapAll('<div class="column" />')
$('.third').wrapAll('<div class="column" />')
alert($('.view-content').html());
});
Use wrapAll() method
$(function(){
var classes = ['.first', '.second', '.third'];
for (i = 0; i < classes.length; i++) {
$(classes[i]).wrapAll('<div class="column">');
}
});
Demo: http://jsfiddle.net/g9G85/
Or here is the very short dynamical solution:
$(".view-content > div").each(function() {
$(".view-content > ." + this.className).wrapAll("<div class='column' />");
});
DEMO: http://jsfiddle.net/CqzWy/
You can use .wrap() to wrap something in a div but if your content is not ordered it will become a mess, here's an example:
Input
<div class="view-content">
<div class="first">content</div>
<div class="second">content</div>
<div class="first">content</div>
</div>
Output
<div class="view-content">
<div class="column">
<div class="first">content</div>
<div class="column">
<div class="second">content</div>
</div>
<div class="first">content</div>
</div>
</div>
You could try whit this:
var arr = $(".view-content div").map(function() { return $(this).attr('class'); }).get();
var results = $.unique(arr);
var i;
for(i = 0; i < results.length; i++){
$('.out').append('<div class="columns"></div>');
$('.'+results[i]).clone().appendTo('.columns:last');
}
alert($('.out').html());
Here an example:
JSFIDDLE