Javascript Open Window - javascript

I'm trying to figure out how to make the javascript open the correct window.The div class .show within my javascript controls the content I want to open. However it is having trouble if multiple .show are being used.
Within one page I may have many of these .show classes and according to which one is pressed I would like that one to show.
For example
<span class="Show">Show</span> -
<div class="show">
Content 1
</div>
<span class="Show">Show</span> -
<div class="show">
Content 2
</div>
So if I click on the top show I will see Content 1 and if I click on the second I will see content 2.
At the moment with the current code provided when clicking the first show "content 1" a window opens with Content 1. If I click the second Content 1 appears and not Content 2.
Below is the javascript.
<script type="text/javascript">
$("a").click(function () {
var html = $(".show").html();
var my_window = window.open("", "mywindow1", "width=350,height=150");
$(my_window.document).find("body").html(html);
});
</script>
Any help would be greatly appreciated :)
I used this fiddle to get to where I am : http://jsfiddle.net/A72TH/

Well this is pretty fragile but you can accomplish it as follows:
var html = $(this).parent().next("div.show").html();
The working sample is here: http://jsfiddle.net/RV86q/

Given your example, you'll want to first navigate to the parent element, then to the next item with a class of "show".
Here is a fiddle example: http://jsfiddle.net/A72TH/
$("a").click(function () {
var html = $(this).parent().next(".show").html();
var my_window = window.open("", "mywindow1", "width=350,height=150");
$(my_window.document).find("body").html(html);
});

Try this
$(".window").click(function () {
var html = $("#"+$(this).data('id')+"").html();
var my_window = window.open("", "mywindow1", "width=350,height=150");
$(my_window.document).find("body").html(html);
});
FIDDLE

Related

Slide toggle jquery assistance needed

I'm having some problems getting this page to work like I need it to. I finally got it to where it'll only allow 1 of the 9 sections open at a time but I can't get these sections to toggle open and close using the same trigger button. If these could have some sort of transition as well, such as sliding open and close, that would be great too. I'm just learning jquery and finally at a point where I should just ask the experts.
https://toyotechus.com/expanding-rows/ is the page I have this set up on.
This is the code I'm using. I have the initial script repeated for all 9 sections and the toggle code below it all.
<script>
( function( $ ) {
'use strict';
$( document ).ready( function() {
var $trigger = $( '.open-vc-row-auto1' );
var $hiddenRow = $( '.vc-row-auto1' );
if ( $hiddenRow.length ) {
$trigger.click( function() {
$hiddenRow.toggle();
return false;
} );
}
} );
} ( jQuery ) );
</script>
<script>
$(".togglerowlink").on("click", function(e) {
var target = $(this).attr("href");
$(target).slideToggle('slow');
$(".vc-row-auto").not(target).hide();
e.preventDefault();
});
</script>
Ideally this toggle would open AND close the section, not just open it. Also I believe it should be sliding open and closed between section changes and it's not.
So it looks likes you wrote individual script blocks to open and close each panel. 9 panels = 9 script blocks. This code opens and closes the rows properly, but doesn't close all the other ones, so you can have 2 or 3 rows open at the same time. This is BAD because you're repeating code over and over again, and making it difficult to change in the future.
But then you did a great thing!! You tried to write a SINGLE script block to close any panel that shouldn't be open. That's the right idea, and you should apply it to every panel.
Problems first:
This line doesn't work because you don't have href attributes on
your HTML elements: var target = $(this).attr("href"); So target === undefined and this does nothing.
You're being too specific with your selectors. This var $trigger = $( '.open-vc-row-auto9' ); is far far too specific to be reused for all the elements. That's why you have to write it 9 times. :(
Solutions - this will require a little html refactoring, but lets list our goals.
Write one piece of code to manage all buttons. It should apply the click handler to ALL buttons, and when a button is clicked, we should know what specific panel that button is trying to target.
Write HTML generic enough to allow for Goal 1 to be achieved. We will use data- attributes to identify buttons, and their corresponding panels.
<style>
.panel { display: none; }
</style>
<!-- buttons -->
<button class="btn" data-target="panel-1">Show Panel 1</button>
<button class="btn" data-target="panel-2">Show Panel 2</button>
<button class="btn" data-target="panel-3">Show Panel 3</button>
<!-- panels -->
<div class="panel" data-panel="panel-1"><h1>This is panel 1.</h1></div>
<div class="panel" data-panel="panel-2"><h1>This is panel 2.</h1></div>
<div class="panel" data-panel="panel-3"><h1>This is panel 3.</h1></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
// select all buttons
// get their target
// if target is open, close it
// if target is closed, open it, and close all others
$('.btn').click(function(e){
e.preventDefault();
var btn = $(e.target);
var target = btn.attr('data-target'); // panel-1, panel-2, etc.
var target_panel = $('[data-panel="'+target+'"]'); // css attribute selector
var targetIsVisible = target_panel.css('display') === 'block'; // display: block; means it's visible ;)
if (targetIsVisible === true){
target_panel.slideUp(); // show the one we want
} else {
$('.panel').hide(); // hide all panels that may or may not be open
target_panel.slideDown(); // show the one we want
}
});
});
</script>
JS FIDDLE DEMO
You'll need to apply the concepts to your code, it's not a perfect copy/paste fix. Good luck. You got this!

Showing a div when an image in a slider is active

I am working with a plugin image slider and am attempting to show specific text that will be associated with image. For instance, image 1 will show paragraph 1, image 2 will show paragraph 2, etc.
I was going to upload a snippet showing what I am doing, but the plugin code was too much. Therefore, here is a jsfiddle link that shows what I am doing. The main code in question is at the bottom of the javascript and the text that I want to show is at the bottom of the html. This code:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('#slide-1');
var activeSlide = $('.slide--active') == true;
if(court == activeSlide) {
court.show();
console.log('It is working');
}
});
I have the text set at display: none; on page load and then when the specific image is displaying (I believe I narrowed this down to the class .slide--active), that text set to show().
Does anyone see what I am doing wrong?
This is because you are not targeting the right active class when each slide takes turn to slide in, I have amended your code below:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('.slide');
var activeSlideClassName = 'slide--active';
setInterval(function(){
if(court.hasClass(activeSlideClassName)){
console.log('It is working');
}
}, 1000);
});
Also your slide will need to have a callback function to capture the event whenever the new slide comes in. In this case I have used setInterval() to monitor the DOM, it isn't the best solution but you get the idea....
Working code here
you can check it $('.ma5slider').on('ma5.activeSlide') same as below :
jsfiddle

Add Link to img after Onclick Toggle with Jquery

I wrote a bit of code (with help from stackoverflow) to toggle two images when clicked. But, I want the second image to be linked to another webpage (eg. The App Store).
How can I add a link to the second image, when the images are always going back and forth when I click them?
jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#slick-toggle').click(function() {
$('img',this).attr('src', function(i, oldSrc) {
return oldSrc == 'img/button.png' ? 'img/applestoredownload.png' : 'img/button.png';
});
$('#slickbox').toggle(400);
return false;
});
});
</script>
Relevant HTML:
<div class="co-download-app">
<div class="wrapper">
<div id="imageContainer">
<a href="#1" id="slick-toggle">
<img src="img/button.png"/>
</a>
</div>
</div>
</div>
Where should I add the link that is only reachable by clicking the second image?
I guess your question is when you click on a link that contains an image, the image source will be changed and for the next time when you click on the link again it will redirect to the links href.
One solution is to change something in your code after first-time clicking on the link to use it later. In this case I gave a class to the link and next time you click on the link it will check to see if it has the class or not. If the follow-href class is present it'll skip the rest and if it isn't image source will be changed.
$(document).ready(function() {
$('#slick-toggle').click(function() {
if (!$(this).hasClass('follow-href')) {
var $img = $(this).find("img");
var src = ($img.attr('src') == 'img/button.png') ? 'img/applestoredownload.png' : 'img/button.png';
$img.attr('src', src);
$(this).addClass('follow-href');
$('#slickbox').toggle(400);
return false;
}
});
});
I changed some of your code, but the result should be the same and I hope you don't mind.

document.createElement / document.body.appendChild not creating / writing div where executed

I have a div with the ID 'headercontent' and I have a script that will write a link amongst the others if javascript is enabled on the users system, but also has a backup using noscript just in case the user does not have javascript enabled.
The code runs fine and the 'a' element is written when executed but the problem is that the code is not written in the div it is executed in. It writes it outside of the 'headercontent' div and it ignores the class style completely, even though it is written in the rendered code. I'm not too worried about the styling/class because I can just add a style attribute to the element and get it written by javascript if necessary, but I'm more concerned about why its writing the code outside of this div.
My code is:
<div id="headercontent">
hey, this is a div.
This is a link
This is another link
<script type="text/javascript">
writeask()
function writeask() {
var writeaskbox = document.createElement('a');
writeaskbox.href = 'javascript:askbox()';
writeaskbox.className = 'button';
writeaskbox.innerHTML =
['Ask'].join(' ')
document.body.appendChild(writeaskbox);
}
function askbox(){
var askbox = document.getElementById('askbox')
if (askbox.style.display == 'none') {
askbox.style.display = 'block'
askbox.style.height = '150px'
} else {
askbox.style.display = 'none'
askbox.style.height = '0px'
}
}
</script>
<noscript>Ask</noscript>
</div>
How do I get the writeask() function to create this a element in the same div it is executed in? So that the final output is:
<div id="headercontent">
hey, this is a div.
This is a link
This is another link
Ask
</div>
Instead of:
<div id="headercontent">
hey, this is a div.
This is a link
This is another link
</div>
Ask
I'm still a beginner with javascript so I'm rather puzzled now. If anyone could help, that would be well appreciated.
Thank you in advance. Dan.
First of all, you are invoking writeask() before the function exists so, in this case you should do it the other way around. It should be:
function writeask() {}
function askbox(){}
writeask();
and then you are appending it to the body
document.body.appendChild(writeaskbox);
, not the div, as it should be
document.getElementById("headercontent").appendChild(writeaskbox);
Instead of
document.body.appendChild(writeaskbox);
use
document.getElementById("headercontent").appendChild(writeaskbox);
Instead of
document.body.appendChild(writeaskbox);
You should do the following:
document.getElementById('headercontent').appendChild(writeaskbox);

How to get div from second page display in first page

In my main.html page I have a button. When that button is clicked, I need to get the content of another page.
The target page has five divs, I need to catch one div and display that div data in main.html page.
Use Javascript and JQuery. See http://docs.jquery.com/Manipulation or specifically http://docs.jquery.com/Ajax/load
To be precise use something like this:
$("#yourdiv").load("/yourpage.html #section");
jQuery can do this very elegantly:
<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
<script>
//only when the DOM has been loaded
$(document).ready(function() {
//bind to button id="myButton" click event
$('#myButton').click(function() {
//populate div id="myDiv" with specific div (div id="someDiv") from another page
$('#myDiv').load('/anotherPage.html #someDiv');
});
});
</script>
See jQuery Ajax/load
As long as the second page is on the same domain, you can use AJAX techniques. For example, using Prototype you could do something like this:
new Ajax.Request('http://url.of.second/page', {
method: 'get',
onSuccess: function(transport) {
//make a regular expression to grab the required HTML fragment
var re = /<div id="otherdiv">(.*)</div>/i;
//extract the fragment from transport.responseText
var found = transport.responseText.match(re);
//add the fragment to targetdiv on current page
$('targetdiv').innerHTML=found[1];
}
});
Jiri's answer is spot on.
http://docs.jquery.com/Ajax/load
is the exact jquery link.
Thanks Jiri...

Categories

Resources