Hoping someone can help as I do not know much about JS
I have 3 divs
<div id="content1">This is content 1 </div>
<div id="content2">This is content 2 </div>
<div id="content2">This is content 2 </div>
I require some JS that randomly loads one of those divs on page load and hide the other two
Any help would be much appreciated
Thanks
You can select all div elements when the page loads, then pick a random one to keep and hide the rest.
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content1">This is content 1 </div>
<div id="content2">This is content 2 </div>
<div id="content3">This is content 3 </div>
Related
I have a set of divs. Lets for this example believe they are like this.
<body>
<div id="ignore" data-tag="sections" style="height:20%">
</div>
<div id="2" data-tag="sections" style="height:20%">
Content content content
</div>
<div id="3" data-tag="sections" style="height:20%">
Content content content
</div>
<div id="4" data-tag="sections" style="height:20%">
Content content content
</div>
<div id="5" data-tag="sections" style="height:20%">
Content content content
</div>
<div id="end" data-tag="sections" style="height:0%">
</div>
</body>
I want to know which element the user is viewing. Viewing is considered in view when the div hits the top of the page.
I also want to know how far they have scrolled through the current element in relation to the next sibling (as a percentage).
As an added bonus I would like to know how much there is left to scroll of the whole page excluding the top "ignore" div.
Can anyone direct me in the right direction?
This is what I've got but 1) it fires WAY to many times 2) after the first element it fails.
My brain hurts.
function get_init_distances(){
array=[]
var elems = document.querySelectorAll('[data-tag="sections"]')
elems.forEach(function(el){
array.push({el:el,top:el.getBoundingClientRect().top})
})
return array
}
function get_current_el_and_perc(){
var i = 0
var start = 0
var perc = 0
var old_id = ""
//loop elements
array.forEach(function(el){
if(i !== 0){
//get perc of completion of first window
perc = (el.top - (start + window.pageYOffset)) / el.top
//log
if(perc > 0 && perc < 1){
console.log(perc)
console.log(old_id)
return
}
}
//set old id and top
old_id = el.el.id
start = start + el.top
i ++
})
}
var scrolls
window.onload = () => {
scrolls = get_init_distances()
document.addEventListener("scroll",get_current_el_and_perc)
}
I'm making a book-like pagination for my website. I simply paste a formatted text on the .html page with tag to indicate which part belongs to which page.
<script type="text/javascript">
function showPages(id) {
var totalNumberOfPages = 6;
for (var i = 1; i <= totalNumberOfPages; i++) {
if (document.getElementById('page' + i)) {
document.getElementById('page' + i).style.display = 'none';
}
}
if (document.getElementById('page' + id)) {
document.getElementById('page' + id).style.display = 'block';
}
};
</script>
<div id="page1">
<p>blah blah</p>
</div>
<div id="page2">
<p>blah blah on a second page</p>
</div>
<div id="page3">
<p>blah blah on a third page</p>
</div>
<div class="container">
<div class="text-center">
<ul class="pagination pagination-lg">
1
2
3
</ul>
</div>
</div>
When I click on a link from the pagination part, it shows exactly the right content.
The problem is, I can't show the first page when the webpage is loaded. It shows everything until you click to a link related to a page.
What should I add in the javascript part to render only the first page content when the page is loaded?
function showPages(id=1){
var totalNumberOfPages = 6;
for(var i=1; i<=totalNumberOfPages; i++){
if (document.getElementById('page'+i)) {
document.getElementById('page'+i).style.display='none';
}
}
if (document.getElementById('page'+id)) {
document.getElementById('page'+id).style.display='block';
}
};
showPages();
Try This. It should work on your machine.
https://jsfiddle.net/bog3L0em/
To do this using javascript just add below line of code on window load function
document.querySelector("a").click();
You don't need to do anything in javascript, you can accomplish this by using CSS:
CSS classes:
.pageDisplayed{
display:block;
}
.pageHidden{
display:none;
}
Once these are available in your page via import of css file, change your HTML, the first page will have class pageDisplayed, so it will show on page load, the others will be hidden with class pageHidden:
<div class="pageDisplayed" id="page1"><p>blah blah</p></div>
<div class="pageHidden" id="page2"><p>blah blah on a second page</p></div>
<div class="pageHidden" id="page3"><p>blah blah on a third page</p></div>
Then modify your javascript function:
function showPages(id){
var totalNumberOfPages = 6;
for(var i=1; i<=totalNumberOfPages; i++){
if (document.getElementById('page'+i)) {
//document.getElementById('page'+i).style.display='none';
document.getElementById('page'+i).classList.remove('pageDisplayed');
document.getElementById('page' + i).classList.add('pageHidden');
}
}
if (document.getElementById('page'+id)) {
//document.getElementById('page'+id).style.display='block';
document.getElementById('page'+id).classList.remove('pageHidden');
document.getElementById('page' + id).classList.add("pageDisplayed");
}
};
Can you help me to make the first div show on page load?
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
.tabContent {
display:none;
}
<div tabindex="1" class="tabs"><div id="tabs1" onclick="showStuff(this)">CARATTERISTICHE</div><div class="triangle-down-tab"></div></div>
<div id="tabs2" onclick="showStuff(this)">DESTINATARI</div><div class="triangle-down-tab"></div></div>
<div tabindex="3" class="tabs"><div id="tabs3" onclick="showStuff(this)"><i class="fa fa-calendar" style="color:#000000;"></i> CALENDARIO</div><div class="triangle-down-tab"></div></div>
<a name="contenuto"><hr></a>
<div id="tabs-1" class="tabContent">
<p>tab 1</p>
</div>
<div id="tabs-2" class="tabContent">
<p>tab 2 tab 2 </p>
</div>
<div id="tabs-3" class="tabContent">
<p>tab 3 tab 3 tab 3</p>
</div>
This is my actual code. jsFiddle
Thanks!
You could try running a function when the document is ready.
$(document).ready(function () {
showTab("tabs-1");
function showTab(divId) {
//Get the element
var divElement= document.getElementbyId(divId);
//Set the css property "display" from "none" to be "block";
divElement..style.display = "block";
}
}):
The function should run once the page has fully loaded.
Let me know how it goes.
I sure can. When you do this kind of stuff best use css. That way when the dom loads the css will kick in and your desired effect will show.
Further more its easier to understand and easier to code up.
.tabContent {
display:none;
}
.tabContent.active {
display:block;
}
Then in the HTML
<div id="tabs-1" class="tabContent active">
So when the page loads tab one is active
Then in your JS
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].className="tabContent";
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).className="tabContent active";
}
Updated fiddle!
https://jsfiddle.net/rb5c5095/3/
We could improve things since we know all the tabs will be made invisible at boot up and tab 1 will show. So when a tab is clicked we could just search the tab who has .active class and remove it, then apply the .active class to the new tab. This would have the benefit that any extra css you add in your html markup would not be removed by the JS code, but i reckon you can work that out and if you can't get back to me i can show you :-)
Here I am invoking the function (upon page load) that tweaks the css of the desired block;
Same can be achieved by $(document).ready;
I took this approach to avoid jquery;
window.onload = showDivOne();
function showDivOne() {
document.getElementById("tabs-1").style.display = "block";
}
I have website with many DIVs. Each contains a single product. I would like to remove or hide those with certain names.
For example - I would like the script to hide all the DIVs containing the name of "food".
As soon as you do this? I was looking for answers in other threads, but I do not have divs with its own ID.
Thanks in advance for your help and suggestions.
<div
data-id="AAA1"
data-title="CLoth"
data-bptf-cost="12"
data-hat-cost="12"
>
<div
data-id="AAA2"
data-title="Food"
data-bptf-cost="12"
data-hat-cost="12"
>
<div
data-id="AAB3"
data-title="Money"
data-bptf-cost="12"
data-hat-cost="12"
>
U can give each div a different or same ID. For example:
<div id="food">Some food</div>
<div id="food">Soome other food</div>
<div id="fruits">Some fruits</div>
If you now write a script, and call all ID with the name food to hide, the first two will hide and the fruit will stay open.
A very simple example, but with CSS demonstrating what i just wrote above. As you can see i hide all of the ID's named food.
http://jsfiddle.net/Lf9EN/
First things first give your divs a closing tag!
Give this a shot.
<script type="text/javascript">
setTimeout(function () {
var divs = document.body.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].getAttribute('data-title') && divs[i].getAttribute('data-title') === 'Food') {
divs[i].style.visibility = 'hidden';
};
};
}, 100);
</script>
---Html---
<div data-id="AAA1"
data-title="CLoth"
data-bptf-cost="12"
data-hat-cost="12">
</div>
<div data-id="AAA2"
data-title="Food"
data-bptf-cost="12"
data-hat-cost="12">
</div>
<div data-id="AAB3"
data-title="Money"
data-bptf-cost="12"
data-hat-cost="12">
</div>
I have a div with several images. I need to only display 6 at a time. I then need to fade out current six and fade in next 6 in the list.
I have this wrapped in a setInterval function. Is this possible?
So far, I’ve got:
var hiddenElements = $('.logos div.logo:gt(5)');
hiddenElements.hide();
setInterval(function() {
// …
}, 2000);
"logo" is the class of the divs that need to fade. They all have CSS background images (hence no img tags).
This is very straight approach. Just for fun. But you should optimize your html. Wrap every 6 images in one container and then toggle them - it will more clean and nature solution.
sketch: http://jsfiddle.net/fl00r/HSGF3/4/
<div class='hidden'>1</div>
<div class='hidden'>2</div>
<div class='hidden'>3</div>
<div class='hidden'>4</div>
<div class='hidden'>5</div>
<div class='hidden'>6</div>
<div class='hidden'>7</div>
<div class='hidden'>8</div>
<div class='hidden'>9</div>
<div class='hidden'>10</div>
<div class='hidden'>11</div>
<div class='hidden'>12</div>
<div class='hidden'>13</div>
<div class='hidden'>14</div>
<div class='hidden'>15</div>
<div class='hidden'>16</div>
<script>
$(function(){
fadeByEachSlice(".hidden",6)
})
function fadeByEachSlice(object, step){
var i = 0;
objects = $(object)
function nextSlice(){
if(i%step == 0){
if( i <= objects.length ){
slice = objects.slice(i, step+i);
fadeSlice(slice)
}
}
}
function fadeSlice(slice){
$(slice).fadeIn().delay(1000).fadeOut("fast", function(){
i+=1; nextSlice();
})
}
nextSlice()
}
</script>
you can use jQuery delay function to show 6 images for a while and then fadeout them and fadein next six.