We Keep Coding

Check if text exist in div using jquery

I would like to check if the text exist in the div element, so that if text matches the text in div it will alert "hello". May I know how am I able to achieve this result? Thank you.
<script type="text/javascript">
jQuery(document).ready(function(){
var text = "div[style*=\"width: 550px;\"]";
if (#content.indexOf(text) > -1){
alert("Hello");
}
});
</script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>

Here you go with a solution https://jsfiddle.net/9kLnvyqm/
if($('#content').text().length > 0) { // Checking the text inside a div
// Condition to check the text match
if($('#content').text().indexOf('Amy')){
console.log('Hello');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
If you want only the text content from a container then use text(), if you are looking for html content then use html().
Hope this will help you.

It is possible to get the value of inline style of an element.
var wid = $("#content > div")[0].style.width;
if(wid === "550px"){
//correct width detected. you can use alert instead of console.log
console.log("hello");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
You have multiple elements inside #content. you may want to use the return value of
$('#content').children().length;
and loop the program to get inline width of all elements. Ping if you need some help with the loop

Sorting through div class via opacity

So I'm using classes to sort different content, but I'm not actually sure how to apply this sorting.
<div class="class1"><div class="heads">Title</div>
<div class="description"><p>Class 1 Item 1</p></div></div>
<div class="class2"><div class="heads">Title</div>
<div class="description"><p>Class 2 Item 1</p></div></div>
<div class="class2"><div class="heads">Title</div>
<div class="description"><p>Class 2 Item 2</p></div></div>
<div class="class3"><div class="heads">Title</div>
<div class="description"><p>Class 3 Item 1</p></div></div>
So let's say the user clicks a button that says 'Class 2'. I want the opacity of everything that is not class 2 to be, say, .5 while class 2's opacity stays at 1. I've tried using .not(), but I'm not familiar with it and most examples use it in conjunction with .siblings(), and I don't want the siblings to fade either. Help? I'm not sure what to do.
Edit: Sorry about the orphan s. ^_^; Fixed them!

http://jsfiddle.net/orjj65g0/7/
$("#container button").click(function() {
var className = $(this)[0].className;
$("#container button").each(function() {
if($(this)[0].className !== className) {
$(this).next().addClass("op05");
$(this).next().removeClass("op1");
} else {
$(this).next().addClass("op15");
$(this).next().removeClass("op05");
}
});
});
With $("#container button").click(...) you access every button in #container.
$(this).[0].className is the class name of the button you have clicked.
After you have clicked the button, you go through every button in the container:
$("#container button").each(...)
In the container you compare the class names with the clicked class name. If there are not the same, than add the class "op05" to the div after the button and remove the class "op1" from the div after the button:
(Example:
<button class="classN">click</button>
<div class="content">div after button</div>
$(".classN").next()...
)
Here:
$(this).next()...
And with all the div's after the button(s), that have the same class name happens the same with the 'opposite' class names.

$("div").not(".class2").css("opacity", "0.5")
will set opacity of all divs except for ones with class class2 to 0.5.

If you are using a container:
$('.container>div:not(.class2)').css('opacity', 0.5);

1. You have invalid HTML. a tag opening is missing. Based on my assumptions, that's how it should look like:
<div class="classX">
Title
</div>
<div class="description">
<p>Class X Item 1</p>
</div>
But it's very unintuitive syntax. What is .description content for? I suggest you to rewrite syntax. For example:
<div class="classX">
Title
<div class="description">
<p>Class X Item 1</p>
</div>
</div>
2. You can use .not() method or :not() selector in jQuery
According to my version of HTML. Let's code!
$("a").on('click', function(){
var $t = $(this).parent(); // clicked div.class2 for example
$t.css("opacity", 1).siblings().css("opacity", 1); // undo selection
$t.siblings().not("."+$t.attr("class")).css("opacity", 0.5);
// hide other classes. Equivalent with selector:
//$t.siblings(":not(."+$t.attr("class")+")").css("opacity", 0.5);
});
Check it that's what you want: http://jsfiddle.net/Tymek/2k85m8r9/

javascript - random div on page load?

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>

Repeat block of text for each DIV instance

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

jQuery fadein/out

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.