I want to change img element in waterwheelCarousel
I have tried to replace img with div in .js/.css
so my html look like :
<div id="waterwheel-carousel-default">
<div class="carousel-controls">
<div class="carousel-prev"></div>
<div class="carousel-next"></div>
</div>
<div class="carousel-images">
<div style="background-image:url('images/testImage1.png')">hhhhh</div>
<div style="background-image:url('images/testImage1.png')">hhhhh</div>
<div style="background-image:url('images/testImage1.png')">hhhhh</div>
<div style="background-image:url('images/testImage1.png')">hhhhh</div>
</div>
</div>
My Js file I have replace every :
$(this).find(".carousel-images img").length
itemsContainer.find('img')
Respectively with:
$(this).find(".carousel-images > div").length
itemsContainer.find('div')
but it dosen't work any one can help?
Related
I would like to hide an element on a specific page by using Javascript, Jquery, or CSS. I have really limited options on how to do it because I'm using a very strict eshop solution. I can add Jquery or Javascript but it will be inserted into every single page on my eshop. I don't want to overload my website so the first condition has to be something like "if body class is .view-commodity-detail" (which is a page for every product detail) do something.
The second condition I need is to hide div with class .detaillist-row but only that one where the text Luggage Volume is located. (I need to hide .detaillist-row-value of this div parameter also - such as 50-59L, 60-69L etc..)
My code on eshop product page looks like this
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
I was thinking about using something like this, but it would hide all my detaillist-row and I want to hide only that one where the Luggage Volume is.
if ($("body").hasClass(".view-commodity-detail")) {
if ($('.detaillist-row > .detaillist-row-name:contains("Luggage volume")').length > 0) {
$(".detaillist-row").hide();
}
}
I hope it makes any sense.
Thank you guys for your help!
You can do this using data-value but you need to add data-value to that element which you want to hide.
like this:
<div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>
div[data-value="Luggage Volume"] {
display: none;
}
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
or you can use javascript
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name" id="detaillist-row-name">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
<script>
var str = document.getElementById("detaillist-row-name").innerHTML;
var n = str.replace("Luggage Volume", "");
document.getElementById("detaillist-row-name").innerHTML = n;
</script>
Would be very easy to embed the missing div container in the html ...if I only could add it. I'm limited to "jimdo's" head area to manipulate classes and id's from there. Code is already written but it seems to me the only way that works is to do that with jQuery or Javascript?
So, I have this code here:
<div id="1" class="2">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
And the missing div container in the html <div class="margin"> needs to be under the first div container from top <div id="1" class="2"> added by its id #1 and then surrounds the rest code below into the new added <div class="margin">
Like this:
<div id="1" class="2">
<div class="margin">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
Is it possible to add it like that with jQuery or javascript? If so, maybe someone could show me how to implement this?
You can try $.before() to append the <div class="margin"> before the target:
const $container = $("#cc-m-7032876518");
$container.before(`<div class="margin">`);
You can try this with jquery.
let children = $("#1").clone().children().wrap( "<div class='margin'></div>" );
$("#1").empty().append(children);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="2">
<div class="margin">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
Here i have HTML structure and the same structure may repeat number of times with the same class names. what i'm trying to do is once i click on the .innerDiv i should be able to access the attr value of the .inid close to its parent element.
here is what i have tried, but its not working. i also tried adding the classname to the element i'm trying to get the value from. but its adding the class to all the element with .inid. how can i do this?
HTML
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Jquery
$(this).on('click',function(){
$('.innerDiv').parents().find('.inid').addClass('testclass');
$('.innerDiv').parents().find('.inid').attr(data-attr);
});
To achieve expected result, use index of innerDiv and add class-testclass to element with class- inid
Find index of clicked innerDiv using index('.innerDiv)
Use that index to add class using eq
Add some sample css to testclass for testing
Syntax error in your code - closing quotes missing for class- second-most-innerdiv
Codepen - https://codepen.io/nagasai/pen/
working example
$('.innerDiv').on('click',function(){
$('.inid').eq($(this).index('.innerDiv')).addClass('testclass');
console.log($('.inid').eq($(this).index('.innerDiv')).attr('data-attr'))
});
.testclass{
background: red;
height: 10px;
width:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv">
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Using JQuery closest() feature to find the parent div, then find the element with class "inid" within that parent element and get the value of the attribute.
$('.innerDiv').on('click',function(){
var inid = $(this).closest('.parent_div').find('.inid');
inid.addClass('testclass');
console.log('selected -> ' + inid.attr(data-attr));
});
Source: https://api.jquery.com/closest/
I am trying to get url from href and paste it in background image.
The problem is that it is applying to just first div not on all div. Is this possible without giving unique classes?
HTML
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
JS
$('#main-bg').css(
'background-image', 'url(' + $('#inner-content a').attr('href') + ')'
);
JSFIDDLE: https://jsfiddle.net/pr07zymf/
An id MUST be unique to each element! Using it multiple times may work at times in CSS, though, JavaScript isn't so forgiving. The reason only the first <div> is styled is because JavaScript ignores all other elements with the same id.
You can use classes instead as shown in the example below!
Example Code:
/* Iterate over every element having the given class. */
$('.main-bg').each(function (index, element) {
/* Cache a jQuery instance of the element. */
var el = $(element);
/* Get the 'href' and assign it as the 'background-image' for each element. */
el.css('background-image', 'url(' + el.find('.inner-content a').attr('href') + ')');
});
.main-bg {color: #fff}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
When you are using HTML, please remember, the ID should always be UNIQUE.
You cannot make them the same name like "main-bg".
Solutions:
1, change their id's name to <div id ="main-bg1">, <div id ="main-bg2">, <div id ="main-bg3">, and <div id ="main-bg4">
2, use CLASS like
<div class="main-bg"> text
<div class="inner-content"> </div>
And remember, every time when you do
$('#ID')
or
document.getElementById(ID)
It will always choose the FIRST element which has this ID.
I need to clone a div with its children, I know the clone() function in jQuery, but I need to change the style of the parent div, or change the id name or show the whole div by animate, is there any way to do this?
This is the div I need to clone and I need to change the top attribute
<div class="news">
<div class="meta-inform">
<div id="waiting">not accepted</div>
<div id="accpted">accepted</div>
<div class="edit">
<div class="editedBy" id="editedBy" >
<div id="editLabel" style="display:inline">edited by</div>
<div id="editorName" style="display:inline">arvin</div>
</div>
<div id="editTime" class="editTime">
<div id="editDate" style="display:inline" >چdate</div>
<div id="editDate" style="display:inline">time</div>
</div>
</div>
</div>
<div id="littleNews">
<div id="number">1000</div>
<div id="divider1"></div>
<div id="title">title</div>
<div id="divider2"></div>
<div id="littleNewsTime">time</div>
<div id="littleNewsDate">چdate</div>
<div id="divider3"></div>
<div id="category">cat</div>
<div id="part">part</div>
<div id="segment">sgmnt</div>
<div id="divider4"></div>
<div id="writer">writer</div>
<div id="view">view post</div>
</div>
<div class="functions">
<div id="edit">edit</div>
<div id="delete">delete</div>
<div id="accptThis">accept</div>
</div>
</div>
Use clone to clone the div with its children.
Use the attr function to change attributes.
Use the css function to change css attributes.
e.g.:
$('.news').clone().attr("id","whatever").css("width","50px")
Then for example, you can append it to any other container you want.
e.g.:
$('.news').clone().attr("id","whatever").appendTo($('body'));
You can also use addClass or removeClass to add/remove classes defined in your CSS files.
does that help?
You could just add new class name and then add proper styles into css, for example:
$('.news').clone().addClass("clone");
And to the css sheet:
.clone {
top: 100px;
}
$('.news').clone().attr("id","elementid").appendTo("body").animate({ 'top': '200px'}, 2000);