Repeat block of text for each DIV instance - javascript

I am trying to get text to showup after each post in my Tumblr theme, and the javascript works in the jsfiddle, but not when I include it into the theme. Am I missing something?
http://jsfiddle.net/KP3uw/70/
HTML
<div id="wrapper">
<div class="post">
<div class="stat-wrap"></div>
</div>
<div class="post">
<div class="stat-wrap"></div>
</div>
<div class="post">
<div class="stat-wrap"></div>
</div>
<div class="post">
<div class="stat-wrap"></div>
</div>
<div class="post">
<div class="stat-wrap"></div>
</div>
<div id="counter"></div>
</div>
JAVSCRIPT
/*global */
function statwrap() {
var count;
var counter;
var bob;
count = document.getElementsByTagName('div').length;
counter = document.getElementById('counter').innerHTML = count;
bob = document.getElementsByClassName('stat-wrap');
var i;
for (i = 0; i < counter; i++) {
bob[i].innerHTML = "jkfdgdff14";
}
}
window.onload = statwrap();
Here's my tumblr theme I have pasted the javascript into btw. (http://lgbtvee.tumblr.com/) I've tried both just above </head> and </body> ending tags but it didn't work either place.

I think you have made this wayy to complicated.
Try using jQuery and using the append() function:
$( ".stat-wrap" ).append( "<p>Test</p>" );
Example:
http://jsfiddle.net/KP3uw/74/

maybe it's not exactly answer to your question but you can add some content to all elements with css :after.
.stat-wrap:after {
content: "jkfdgdff14";
display: block;
}
demo: http://jsfiddle.net/t0ro94dz/

I would have made this a comment, but don't have enough reputation to do it yet.
Your loop's condition i < counter is off, I think. The variable counter is tied to innerHTML, which I believe is a string (not a number). Try changing it to i < count.
--edit--
I also noticed that your theme is throwing 2 of the same errors:
Uncaught TypeError: Cannot set property 'innerHTML' of null
since you don't actually have any elements with the ID of counter on the page. Also, in the page source, your script is repeated twice.

I dont know what is not working but there are so many divs. Maybe you want limit and say
count = document.getElementsByClassName('post').length;
Also can you check if you need to parse innerHTML into int using parseInt, some JS compilers can scream
document.getElementById('counter').innerHTML = count;
count = parseInt(document.getElementById('counter').innerHTML);
OR simply
document.getElementById('counter').innerHTML = count
counter = count

Related

Style for loop with CSS

Im supposed to make 8 boxes and style them each, make the boxes with for loop. Every odd box should look different then the others. I have tried to make an id, but when i use the id in CSS, it wont do anything. Can someone help?
Here is the code i have:
var text = "";
var i;
for (i = 1; i < 10; i++) {
text += "Box number " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
.demo {
border: black;
}
<p id="demo"></p>
As volodymyr says use css nth-child property.
In javascript you can accomplish this in the following manner:
for(let i = 0; i < document.querySelectorAll('.class').length; i += 2){
document.querySelectorAll('.class')[i].style.color = 'red';
}
<div class="class">1</div>
<div class="class">2</div>
<div class="class">3</div>
<div class="class">4</div>
<div class="class">5</div>
<div class="class">6</div>
<div class="class">7</div>
<div class="class">8</div>
<div class="class">9</div>
<div class="class">10</div>
This uses a for loop which iterates over every odd element, and then applies styles via javascript. Usually a pure CSS implementation would be preferable though.
You can use css nth-clild property
.class:nth-child(odd) {background: red}
<div class="class">1</div>
<div class="class">2</div>
<div class="class">3</div>
<div class="class">4</div>
<div class="class">5</div>
<div class="class">6</div>
<div class="class">7</div>
<div class="class">8</div>
<div class="class">9</div>
<div class="class">10</div>
Your css references the "class" demo selector but your HTML uses an "id" property id='demo'. Change either one to match the other.

Buttons work using jQuery append() but not using kendo template

i'm working on some stuff with kendo and i'm having an issue i can't figure out how solve it ..
first here is my code :
html:
<div data-role="view" id="drawer-prendreRendezVous" data-layout="drawer-layout" data-title="Mondial Relay" data-before-show="SuiviColisViewHelper.I().PrendreRendezVousManageBeforeShow">
<div id="headerPriseRendezVous" style="width:100%;height:40px;margin-top:6px;">
<div id="headerPriseRendezVousImg" style="padding-top:4px;padding-left:8px;position:relative; float:left; ">
<img src="./img/clock.png" />
</div>
<div id="headerPriseRendezVousImg" style="position: relative; float:left;margin-left:20px; margin-top:10px; font-style: italic; font-weight: bold;color:rgb(120,120,120);"> <span>Votre Rendez Vous</span>
</div>
</div>
<div id="contentPriseRendezVous" data-template=""></div>
</div>
the template :
<script type="text/x-kendo-template" id="contentPriseRendezVousTemplate">
<div style="width:100%;height:2px;background-color:rgb(120,120,120); margin-top:5px;"></div>
# for (var index = 0; index < Creneaux.length; ++index) {#
Test
#}#
</script>
the code i'm using to set the template:
var template = kendo.template($("#contentPriseRendezVousTemplate").html());
var result = template(obj);
$("#contentPriseRendezVous").html(result);
if i do that, it work the first time, i get my buttons ...
but if i go back and come back after that, it doesn't work anymore ..
if i use jQuery instead of the code above like this :
for (var i = obj.Creneaux.length - 1; i >= 0; i--) {
$("#contentPriseRendezVous").append('');
};
it work perfectly well, that is the part i don't understand ... do i have a problem with my template ... am i doing something bad ...
thank you for helping ;)

Hiding or removing DIV without ID

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>

Simple toggle div visibility with Javascript not working

This is very frustrating as it seems so simple yet is not working.
In my body I have
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<inputtype="button" value="Start" onClick="splash();" />
</div>`
And in my head, within script tags I have
function splash() {
var divSplash = document.getElementById("splashscreen");
divSplash.style.display = "none";
}
Surely when Start button is clicked, the splash() function should be called and the display of my splashscreen div be chanted to none?
The problem here is that the you write language="text/javascript", if you use instead language="javascript" it works.
I recommend you remove the language property and use type="text/javascript" instead. If you're using HTML5, you can omit the type property.
<script type="text/javascript">
function startGame() {
var divSplash = document.getElementById("splash");
divSplash.style.display = "none";
}
</script>
Also, the language property is now obsolete.
Using the exact code that you show here, I get the error 'divSplash is null.' This is to be expected -- your div is named "spashscreen" but your JS function is looking for a div named "splashscreen." (You're missing an 'l').
When I fix the typo, it works.
You're not using the same id :)
spashscreen != splashscreen
Here is the answer in a jsfiddle
HTML:
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<button onclick="splash()">Start</button>
</div>
Javascript:
function splash() {
var divSplash = document.getElementById('splashscreen');
divSplash.style.display = "none";
}

Showing/Hiding Divs with the same class name - Javascript

I am trying to replicate something similar to what the Google Javascript from the Ground up Accomplishes
http://code.google.com/edu/submissions/html-css-javascript/#javascript
Basically have multiple div classes with the same name and show/hide those based on adding removing classes to the original class name.
Heres my markup
<div class="vidItem" id="vidItem">
<div class="vidTitle">
<h2></h2>
</div>
<div class="vidContain" id="vidContain">
<iframe class="testtt" width="560" height="315" src="-----" frameborder="0" allowfullscreen> </iframe>
</div>
</div>
<div class="vidItem" id="vidItem">
<div class="vidTitle">
<h2></h2>
</div>
<div class="vidContain" id="vidContain">
<iframe width="560" height="315" src="----" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Heres my javascript
var toggleExpando = function() {
var expando = this.parentNode;
if (hasClass(expando, 'hide')) {
removeClass(expando, 'hide');
addClass(expando, 'show');
} else {
removeClass(expando, 'show');
addClass(expando, 'hide');
}
};
var expandos = getElementsByClass('vidContain');
for (var i=0; i < expandos.length; i++) {
addClass(expandos[i], 'hide');
var expandoTitle = document.getElementById('vidItem');
addEventSimple(expandoTitle, 'click', toggleExpando);
}
}
Onload both of the divs seem to set their classes to hide just fine but when I click on the top one everything disappears but when I click on the bottom one nothing happens. I am assuming there is a problem with my for loop and also where it says (expando = this.parentNode). I have no idea where to go from here.
Any help or ideas would be appreciated.
Javascript assumes that there is only one element with specific id (and this is what standard say). So when you say..
var expandoTitle = document.getElementById('vidItem');
here the variable contains only first item with id vidItem and attaches event to that element only.
This can be corrected by using class names instead of id.
jQuery might be a good option for this. ID needs to be unique but classes don't, so you can query for all element with a class name in the same way you would with id's in straight javascript by using jQuery. Not sure on what you want the initial state to be so i'm hiding all on inital load. Something along the lines of below is what i mean. (code is untested. place it in the html head)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.vidItem').addClass('hide');
$('.vidItem').click(function(){
$('.vidItem').addClass('hide');
$(this).removeClass('hide');
$(this).addClass('show');
});
});
</script>
If you want to make it look nice with transition effects you can use some of the build in jQuery ones such as:
$('.vidItem').fadeOut();
$(this).fadeIn();
or
$('.vidItem').slideUp();
$(this).slideDown();

Categories