Develop Reference

How to display page onload popup?

I am using below code for onclick popup, but I need the same popup for onload - how can I solve this problem?
<div class="app">
<div class="canvas">
Demo — Explode Modal
</div>
</div>
<div id="explode" class="ui--modal explode">
<div>
clear
<h4>Boooooom!!!</h4>
<img src="assets/img/e2dshop.jpg" >
<!--close-->
</div>
<div class="bg">
<img src="assets/img/explode-med.gif" id="boooom">
</div>
</div>

Try this solution
<script>
jQuery('window').on('load', function(){
jQuery('#boooom').attr('src', 'assets/img/explode-med.gif');
});
</script>
As well include jQuery lib.

Try this
$(document).ready(function() {
$(".ui--button").click();
});

Adding class to only one div

I need some help adding a class to a div if is has an image to it.
<div class="large-6 columns check-Div">
<div class="custom-table">
<div class="text">
<?php echo $latestimage; ?>
</div>
<div class="custom-table-box">
<?php echo $table; ?>
</div>
</div><!-- end custom-table -->
</div>
if ($j(".large-6.columns.check-Div > .custom-table-box:contains('size-full')")) {
$j('.large-6.columns.check-Div').addClass("hasImage");
}
The jQuery above is adding the hasImage class to all of the divs but I only want it to apply when there is a div that contains a image. Is there a way to do it singularly? Or by parent? I have tried but I'm a little lost.
Any help would be wonderful!

You can do this using jquery no need to add if condition
jQuery(".custom-table-box:has(img)").parents(".check-Div").addClass("hasImage");

You can do this by removing the if statement and just adding the class based on the :has selector:
$j('.large-6.columns.check-Div:has(img)').addClass('hasImage');

For clarity I have added additional background color
$(".custom-table").children("div").each(function(item,index) {
$(this).has("img").css("background-color", "red"); // Comment it if not needed
$(this).has("img").addClass("hasImage");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-6 columns check-Div">
<div class="custom-table">
<div class="text">
xyz<img />
</div>
<div class="custom-table-box">
abc
</div>
</div>
</div>

CSS :has selector is what you are looking for (here for a direct descendant)
$('div:has(> img)').addClass("hasImage") //jquery way
or just in css (but this would require a polyfill, as its in Level 4, which is draft currently)
div:has(> img) {
border-color: 1px solid red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
JSfiddle here: https://jsfiddle.net/y6gtt2vg/1/
Browser support
About CSS Selector Compatibility
Regardless of a browser's support of CSS selectors, all selectors listed at api.jquery.com/category/selectors/ will return the correct set of elements when passed as an argument of the jQuery function.
https://jquery.com/browser-support/

I think you should try using id.
<div id="addImg" class="large-6 columns check-Div">
<div class="custom-table">
<div class="text">
<?php echo $latestimage; ?>
</div>
<div class="custom-table-box">
<?php echo $table; ?>
</div>
</div><!-- end custom-table -->
</div>
if ($j(".large-6.columns.check-Div > .custom-table-box:contains('size-full')")) {
$j('#addImg').addClass(".hasImage");//also missing . for class
}

Try this code
$('.large-6 .columns .check-Div div:has(img)').addClass('hasImage');

Only show parent if child contains certain string

I have a group of divs that appear on multiple pages, that have this pattern:
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagOne
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagTwo
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagThree
</div>
</div>
</div>
</div>
</div>
This group appears on multiple pages.
My ideal javascript/jquery solution is something like this:
display:none on all div class="entry"
if child div class="entry-title" contains #something, change parent div class="entry" to display:block
so that on Page One I can insert this code to only show #hashtagOne, on Page Two only #hashtagTwo, etc. etc.

Try something like this:
$('.entry-title').each(function(i,v){
if ($(this).text().trim().charAt(0) =="#") {
$(this).closest('.entry').show();
}
});
https://jsfiddle.net/0ybstx9o/

This simply works fine :
$(document).ready(function(){
$(".entry").each(function(){
if($(this).find(".entry-title:contains('#something')").length > 0){
$(this).css("display","block");
}
});
});

Its pretty simple, just use :contains() and .closest() together either on page load or whatever event you want this display:block behavior to run.
As you want to show based on differnt pages, I suggest to use page title and set it to title="Page One" and title="Page Two" etc and then compare it in document ready state and show accordingly the desired div
jQuery(document).ready(function(){
jQuery('div.entry').hide();
if(jQuery(document).find("title").text() == 'Page One')
{
jQuery( "div.entry-title:contains('#something')" ).closest('.entry').show();
}
else if(jQuery(document).find("title").text() == 'Page Two')
{
jQuery( "div.entry-title:contains('#something Else')" ).closest('.entry').show();
}
});

$(".entry").find(".entry-title").text(function(key, text) {
if (text.indexOf("#")>=0) {
$(this).parents(".entry").hide()
}
})
Here is the working Plunker

Change text and image onclick

I am trying to figure out how to do this, but I can't get it.
It's supposed to be like a step by step-thing. When pressing the image, both the text and image will change. There are supposed to be 3 steps.
I have been trying a little bit js and php, but it haven't helped yet. Also CSS, but it's a little bit hard because it's 3, and not 2 steps. (I have been trying this e.g.: http://jsfiddle.net/eliranmal/2rwnz/)
<div id="forsideslides" class="row">
<div class="container">
<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6"><div class="well">
<h1>Step 1</h1>
<p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
</div></div>
<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4"><div class="well">
<img src="<?php bloginfo('stylesheet_directory'); ?>step1.png">
</div></div>
</div>
</div>
One of the codes I have been trying to use is the following:
$('.slider_innbokskontroll').click(function(){
var $this = $(this);
$this.toggleClass('slider_innbokskontroll');
if($this.hasClass('slider_innbokskontroll')){
$this.text('Les mer');
} else {
$this.text('Les enda mer');
}
});
But it was not what I have was looking for.
By pressing the image (see code below) it should change.
<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4"><div class="well">
<img src="<?php bloginfo('stylesheet_directory'); ?>step1.png">
</div></div>
It should be changing like step1.png => step2.png (don't bother about the details with the link, I just made it simple to get it easier to understand)
The text below should also change:
<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6"><div class="well">
<h1>Step 1</h1>
<p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
</div></div>
E.g like:
Step 1 -> Step 2
Text 1 out of 3 -> Text 2 out of 3
And so forth...
As I see it, it is relatively simple, but I have really no idea of what I am doing. Is there someone who could help me finding the solution? A short code I may understand would be fine.
Thank you.

Looks to me like you are not targeting the correct DOM element.
In your example jQuery code:
$('.slider_innbokskontroll').click(function(){
var $this = $(this);
$this.toggleClass('slider_innbokskontroll');
if($this.hasClass('slider_innbokskontroll')){
$this.text('Les mer');
} else {
$this.text('Les enda mer');
}
});
You are trying to change the $(this) object, instead of what you want above.
So instead do something like this:
$('.slider_innbokskontroll').click(function(){
$('#forsideslides_tekst h1').text('Step 2');
$('#forsideslides_tekst p').text('Text 2 out of 3');
$('#forsideslides_bilde img').attr('src', 'newimage.jpg');
});
where your on click will have the class slider_innbokskontroll
EDIT here is the jsfiddle: http://jsfiddle.net/2rwnz/204/
using your HTML code:
<div id="forsideslides" class="row">
<div class="container">
<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6">
<div class="well">
<h1>Step 1</h1>
<p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
</div>
</div>
<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4">
<div class="well">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
</div>
the jQuery:
$("#forsideslides_bilde img").click(function(){
if ($(this).attr('src') == 'http://placehold.it/350x150') {
$('#forsideslides_tekst h1').text('Step 2');
$('#forsideslides_innhold_tekst').text('Text 2 out of 3');
$(this).attr('src', 'http://placehold.it/350x200');
} else if($(this).attr('src') == 'http://placehold.it/350x200') {
$('#forsideslides_tekst h1').text('Step 3');
$('#forsideslides_innhold_tekst').text('Text 3 out of 3');
$(this).attr('src', 'http://placehold.it/350x300');
}
});
You can also use a global variable to detect which step, but just because I want to show you how you can detect which image i coded it that way.

You need to place the click event on your image first and then change the text...
Here is an example with jquery:
$('#forsideslides_bilde img').click(function() {
//Change text
$('#forsideslides_innhold_tekst').html('New text');
//Change image src
$('#forsideslides_bilde img').attr('src', 'newImageLocation.png');
});

You can try calling a JavaScript function when the image is clicked. In order to do that, you'll need to assign an onclick event listener to the image tag. In my example I'm using getElementsByName() so I'm giving each element a name tag as well...
<h1 name="change">Step 1</h1>
<p name="change">Step 1 of 3</p>
<img src="step1.png" name="change" onclick="nextStep()" />
Then you can use the Javascript code to get each one of the elements and change them accordingly. You should be able to add in the PHP method call for the image name without any issues.
<script language="javascript">
function nextStep() {
var changeElements = document.getElementsByName("steps");
changeElements[0].innerHTML = "Step 2"; // header tag
changeElements[1].innerHTML = "Text 2 out of 3"; // paragraph tag
changeElements[2].src = "<?php bloginfo('stylesheet_directory'); ?>step2.png"; // image tag
</script>
If the bloginfo('stylesheet_directory'); method call doesn't work within the JS code, you can assign that to a PHP variable instead and reference that variable in the JS code.

jQuery works only on first div

Click works just on first div with id plus but other divs with the same id dont work. I dont know whats the problem... I dont get what the problem is. Please help. Thanks!
Here is the code...
Edited:
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="41">Good</div>
<div class="minus" glas="41">Bad</div>
</div>
<div id="referenceInfo">
01:40 PM 06.09.2014.
</div>
</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="37">Good</div>
<div class="minus" glas="37">Bad</div>
</div>
<div id="referenceInfo">
01:38 PM 06.09.2014.
</div>
</div>
</div>
JavaScript
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);
});

IDs should be unique. use same class instead of ids.Like this:
<div class="plus" glas="37">Good</div>
and then use:
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);

$(".plus").click(...)
not
$("#plus").click(...)
There can and shall only be one item with a certain ID on the page. Use classes on those buttons instead.

Couple of issues. You have mismatched divs. This last div looks like its the culprit.
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div> <--this one
Your second issue is that you shouldnt have multiple ids that are the same on a page. Instead set it as a class with
<div class="plus"> Then reference them in jquery with
$(".plus").click( function()

I have to use class if you have more than one div. Try with .plus