I currently have the following setup.
<div class="elegant-1">
<div class="hold-1">
<div class="image-1"></div>
<div class="image-2"></div>
<div class="image-3"></div>
<div class="image-4"></div>
<div class="image-5"></div>
<div class="image-6"></div>
</div>
</div>
I would like to have this setup...
var divs = $('div[class^="hold-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(900)
.delay(6000)
.fadeOut(900, cycle);
i = ++i % divs.length;
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elegant-1">
<div class="hold-1">
<div class="image-1">1</div>
<div class="image-2">2</div>
<div class="image-3">3</div>
<div class="image-4">4</div>
<div class="image-5">5</div>
<div class="image-6">6</div>
</div>
<div class="hold-2">
<div class="image-7">7</div>
<div class="image-8">8</div>
<div class="image-9">9</div>
<div class="image-10">10</div>
<div class="image-11">11</div>
<div class="image-12">12</div>
</div>
<div class="hold-3">
<div class="image-13">13</div>
<div class="image-14">14</div>
<div class="image-15">15</div>
<div class="image-16">16</div>
<div class="image-17">17</div>
<div class="image-18">18</div>
</div>
</div>
The reason I would like the following setup is because I would like to scroll through my divs and move the previous divs out of the page while introducing the next div and just have this on a constant loop. I know how to fade the divs one by one by using the above JavaScript.
However, I would like an animation moving them out of the screen and introducing the next one. Any help is appreciated.
Related
How can I achieve something like this.
I have a Container with
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
What I now want to archieve for example: If I have
const div1ToSwap = ( div 1 )
const div2ToSwap = ( div 4 )
That the final result will be
<div class="div4">4</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div1">1</div>
<div class="div5">5</div>
This is a very hacky way to do it, but this way you don't need to remove all elements then append them back in.
let div1 = document.querySelector(".div1");
let div4 = document.querySelector(".div4");
let temp = div1.cloneNode(true);
div1.innerHTML = div4.innerHTML;
div1.className = div4.className;
div4.innerHTML = temp.innerHTML;
div4.className = temp.className;
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
it's simple, first you need to container all the div you need to make this script like this, we will write the function later
you can try it by the link https://codepen.io/nt0412/pen/rNJWMKP
<div class="all-div-container">
<div class="div1" onclick="swapDiv(event,this);">
1
</div>
<div class="div2" onclick="swapDiv(event,this);">
2
</div>
<div class="div3" onclick="swapDiv(event,this);">
3
</div>
<div class="div4" onclick="swapDiv(event,this);">
4
</div>
<div class="div5" onclick="swapDiv(event,this);">
5
</div>
</div>
<script type="text/javascript">
function swapDiv(event, elem) {
elem.parentNode.insertBefore(elem, elem.parentNode.firstChild);
}
</script>
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>
I have searched in several similar threads, but I do something wrong and it seems to not work.
I have this HTML structure:
<div id="form" class="inquiry-section">
<div class="inner">
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-straight-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-gshape-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-pshape-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-isle-ab">some content</div>
</div>
</div>
</div>
</div>
What I want to achieve is after clicking an input in .inner-form to .slideDown() the .inner-ab in the same .inner-form-col and to .slideUp() all the .inner-ab in the other columns. I made it work with .show() / .hide() or switching a class but as I need height: auto, I cannot achieve animation AND re-flowing the content below.
Have You try jQuery Easing Plugin
http://gsgd.co.uk/sandbox/jquery/easing/
I somehow managed to make it work by using this, but I'm not 100% sure why it does:
$('.inner-form-col').each(function() {
var $dropdown = $(this);
$(".inner-form input", $dropdown).click(function(e) {
$div = $(".inner-ab", $dropdown);
$div.slideDown();
$(".inner-ab").not($div).slideUp();
});
});
How would I use jQuery to get get the text from the rating selected div within the id=overall answer div?
I want to dynamically fetch the text "TESTING" from that div within the overall parent div.
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING</div>
</div>
I tried to do this and it is blank.
$(document.getElementById('overall')).find('.rating selected').text();
Your code would work but your selector is wrong. It would be...
$(document.getElementById('overall')).find('.rating.selected').text();
Notice the dot and no space between rating and selected.
However, I think you are over complicating things...
$('#overall .selected').text();
Example...
alert($('#overall .selected').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING - selected</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING - not selected</div>
</div>
$('#overall .rating.selected').html()
I'm working on a UI that has Twitter feeds. I want to be able to open a panel in the middle of two tweets, pushing the tweet below downwards. This functionality can be seen in tweet clients like TweetBot. As each new tweet in the stream popped up it would push each one below it down as well. Tool bar would be the same for all tweets.
Here is what I have for the JS:
$(document).ready(function() {
hidden = true;
$("div#tweetcontainer").click(function() {
if (hidden == false) {
$("div#toolbar").slideUp('fast');
hidden = true;
} else {
$("div#toolbar").slideDown('fast');
hidden = false;
}
});
});
Here is the markup of the HTML:
<div id="wrapper">
<!------------- Indivdual Tweet -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!------------- Indivdual Tweet 2 -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<div id="toolbar">
<div class="toolset">reply</div>
<div class="toolset">Retweet</div>
<div class="toolset">Favorite</div>
<div class="toolset">Track</div>
<div class="toolset">Details</div>
</div>
</div>
Do
$toolbar = $(.toolbar).clone();
$(this).after($toolbar);
I guess you will have to do something like
$(.toolbar).addClass("hidden");
before you appending it to the div, and then do
if ($(.toolbar)).hasClass("hidden"){
...pulldown...
}
or something to keep it disappeared and make it pullDown after appending.