Changing class based on iframe src - javascript

So I have this menu:
<div class="default">Text 1</div>
<div class="default">Text 2</div>
<div class="default">Text 3</div>
And this iFrame:
<iframe src="splash.html" id="change_frame" name="change_frame" style="border-width:0;" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
What I want: when people click on one of those links in the menu, I want to add or remove a class. Here's an example to make it easier to understand:
When they click on text 1, the code should look like this:
<div class="default active">Text 1</div>
<div class="default">Text 2</div>
<div class="default">Text 3</div>
And then, if they click on text 2, the active class should be removed from text 1 and inserted on text 2, like this:
<div class="default">Text 1</div>
<div class="default active">Text 2</div>
<div class="default">Text 3</div>
Since the target is an iframe, I should probably use javascript, but I can't figure it out how. I know I wrote a bunch of code here, but I just wanna make myself clear. I searched everywhere but I couldn't find any solution.

If you're using jQuery, you can easily do that with click events and selectors.
$('.default').on('click', function() {
// Remove all active classes
$('.default').removeClass('active');
// Add an active class on the clicked element
$(this).addClass('active');
});
Demo here

select the <a> child of an element with default class ;
remove the active class from every element with default class ;
apply the active class to the parent element of the current <a>.
Demo:
$(function() {
$(".default > a").on("click keypress", function() {
$(".default").removeClass("active");
$(this).parent().addClass("active");
});
});
iframe {
height: 300px;
width: 100%;
}
.active:after {
color: red;
content: ' <- active!';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="default">Text 1
</div>
<div class="default">Text 2
</div>
<div class="default">Text 3
</div>
<iframe src="http://stackoverflow.com" id="change_frame" name="change_frame" frameborder="0" scrolling="no"></iframe>

When the a element is clicked you can use addClass to set the parent div as active. Try this:
$('.default a').click(function() {
$('.default').removeClass('active'); // remove the class from the current active div
$(this).closest('.default').addClass('active');
});
Example fiddle

JQuery, simply make your result in a better way.
$(document).ready(function(){
$(".default a").on("click",function(){
$(".default").removeClass("active");
$(this).parent(".default").addClass("active");
})
});

Related

jQuery onclick in for each selector

When I click a button div, I want to add a class named active to the popup div that has the corresponding class name in the data-trigger attribute.
For example if I click on the div with class name button-two, the div with data-trigger="button-two" should get class active.
The issue: active is added only to the last popup div. How can I make this work?
Here's what I have tried:
$('.popup').each(function() {
popupObj = $(this);
var popupTrigger = popupObj.data("trigger");
$('.' + popupTrigger).click(function() {
popupObj.addClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-one">Test 1</div>
<div class="button-two">Test 2</div>
<div class="button-three">Test 3</div>
<div class="popup" data-trigger="button-one">Hello world</div>
<div class="popup" data-trigger="button-two">Hello there</div>
<div class="popup" data-trigger="button-three">Hello again</div>
This is because you did not declare popupObj as a local variable; It is global, and so it will have changed in the last iteration of the each: it is that value that will be referenced in all three click handlers.
Remember that each will have performed all iterations before any of the click handlers get called.
Solution: use var popupObj. That way each of the click handlers will reference their "own" variable.
Simple way to use data attribute also for buttons .. and make only one click event for the buttons .. see the next example
$('.button[data-to-trigger]').on('click' , function(){
var GetTriggerDiv = $(this).attr('data-to-trigger');
$('.popup').removeClass('active').filter('.popup[data-trigger="'+GetTriggerDiv+'"]').addClass('active');
});
.active{
background : red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button" data-to-trigger="button-one">Test 1</div>
<div class="button" data-to-trigger="button-two">Test 2</div>
<div class="button" data-to-trigger="button-three">Test 3</div>
<div class="popup" data-trigger="button-one">Hello world</div>
<div class="popup" data-trigger="button-two">Hello there</div>
<div class="popup" data-trigger="button-three">Hello again</div>
The "each" function in jQuery returns 2 values: index and element. Try using the element returned instead of $(this).
$('.popup').each(function(index, element) {
var popupTrigger = element.data("trigger");
$('.'+popupTrigger).click(function() {
element.addClass('active');
});
});
Here's a solution that matches the popup to the button using the same data trigger for both:
$(document).ready(function() {
$(".btn").click(function() {
var trigger = $(this).data("trigger");
$('.popup').each(function() {
if ($(this).data("trigger") == trigger) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
});
.active {
background-color: coral;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn" data-trigger="button-one">Test 1</div>
<div class="btn" data-trigger="button-two">Test 2</div>
<div class="btn" data-trigger="button-three">Test 3</div>
<div class="popup" data-trigger="button-one">Hello world</div>
<div class="popup" data-trigger="button-two">Hello there</div>
<div class="popup" data-trigger="button-three">Hello again</div>

Selecting a parent class from a child class when there are multiple div's of same parent class

There are four parent div's with same class and all of them have a child with class 'child'. Now the question is, Let's say I click on the First parent div's Child div(First Child) and I want to have some effect on it's parent i.e 'First Parent' to be effected only. Due to being similar class' all parent div's will be effected.
Here's the HTML
<div class="parent"> //First Parent
<div class="child"></div> //First Child
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
Here's the JQuery
$('.child').on('click',function(){
$(this).parent('.parent').css({
'display':'none';
});
});
Clicking on child element will effect all parent div's with class "parent". Either I can give them all separate classes then write onClick() method for all of them but that is not a proper solution.
You can do
$(this).parent().hide();
if you want to hide the parent of the clicked div
Use closest('.class')
$('.child').click(function() {
$(this).closest('.parent').css('display':'none');
});
I Updated my answer !
Your answer is correct and a good practice, I don't see what the issue here is.
The only change you could do $(this).parent('.parent').hide(); instead of using the jQuery css method.
try this code
$(document).ready(function() {
$('.child').click(function() {
$(this).parent().css('display', 'none');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">first</div>
</div>
<div class="parent">
<div class="child">second</div>
</div>
<div class="parent">
<div class="child">third</div>
</div>
<div class="parent">
<div class="child">fourth</div>
</div>
$('.child').on('click',function(){
$(this).closest('.parent').css({
'display':'none'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"> //First Parent
<div class="child">div 1</div> //First Child
</div>
<div class="parent">
<div class="child">div 2</div>
</div>
<div class="parent">
<div class="child">div 3</div>
</div>
<div class="parent">
<div class="child">div 4</div>
</div>
alterate your JS as follow:
$('.child').on('click',function(){
$(this).parent().css({
'display':'none'
});
});
For me, on click of a div, it hides its parent. Not others.
By the way, you had a ";" after 'none' which is invalid as this is a object, and accepts only either nothing or a comma.
see https://jsfiddle.net/n66sdgdz/
Okay, so lots of answers here with "try this" or other examples.
First off, your code actually works, as you can see here:
Fiddle
However, there was one error in you code. This being the ; at the end of your 'display':'none';
There should be no ; inside a javascript object.
$(document).ready(function() {
$('.child').on('click',function(){
$(this).closest('.parent').css('display','none');
});
});
OR
$('.child').on('click',function(){
$(this).parent('.parent').eq(0).css('display','none');
});
https://jsfiddle.net/t9wxbLs8/

Show / Hide child DIVs on click on the main DIV, similar to spoiler (pure JS)

I have 20 rows of DIVs. The initial state hides all spoilers and is like below (I show the first 3 rows here):
<div class="main" onClick="showHide()">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide()">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide()">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
etc..
CSS:
<style>
.main{background:silver;padding:1em;margin-bottom:1em}
.hide{display:none}
.show{display:block}
</style>
My goal is to manipulate/change the spoiler classes after user clicks on the "main" DIV. That is, after clicking on one of the "main" DIVs the "spoiler hide" class should automatically change to "spoiler show" so that the text is shown. And when user clicks on another "main" DIV, all 'spoiler show' classes should change to 'spoiler hide' and only the currently clicked "main" DIV should apply the 'spoiler show' class.
So it's basically like a toggle where only one (the last clicked) DIV shows the spoiler. I hope to find the simplest/fastest solution (JS in one line would work too).
I tried to use some JS function like below, but cannot make it work. I also read that 'document.querySelectorAll' might be used somehow.. I cannot use jQuery here.
<script>
function showHide() {
var e = document.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++) {
e[i].className ='spoiler show';
}
}
</script>
Try this:
<script>
function showHide(sender) {
var e = sender.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++)
{
e[i].className ='spoiler show';
}
}
</script>
<div class="main" onclick="showHide(this)">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide(this)">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide(this)">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
Working fiddle here: http://jsfiddle.net/t0shq84f/

onClick image, display div content

I am very new to javascript but i wanted to know how to do something in it. Basically i have 3 image buttons. I want to know how i can make it so when you click the first button a div shows up, then when you click the next button the div that is present disappears and the next div shows up for button two in its place. By divs i mean any content that i put inside of it. Just like the tabs on a website, when you click one you get a page. Then when you click the next tab the previous page disappears and the next page is shown. Instead of pages these would be divs.
Any advice would be greatly appreciated.
Here is the simple solution for hide and show related div's
Check the link for solution : http://jsfiddle.net/silpa/rny2wb5z/34/
HTML:
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId1"/>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId2"/>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId3"/>
<div id="divId1" class="hideDivs">Div 1</div>
<div id="divId2" class="hideDivs">Div 2</div>
<div id="divId3" class="hideDivs">Div 3</div>
jQuery:
$("img").on('click',function(){
var hello = $(this).attr('data-id');
$('.hideDivs').hide();
$('#'+hello).show();
});
CSS:
.hideDivs{
display:none;
}
Assign IDs to the divs, then set their visibility with a function. You can call this function with the onClick attribute of the image button.
Javascript:
function changePage(newPageId) {
//hide all pages
document.getElementsByClassName("selectablePages").style.display = 'none';
//show page we want to see
document.getElementById(newPageId).style.display = 'block';
}
Html:
<img src="p1.gif" alt="page1" onclick="changePage('page1')" />
<img src="p2.gif" alt="page2" onclick="changePage('page2')" />
<img src="p3.gif" alt="page3" onclick="changePage('page3')" />
<div id="page1" class="selectablePage">asdasdasd</div>
<div id="page2" class="selectablePage">jghjghjghj</div>
<div id="page3" class="selectablePage">utytyutyuty</div>
Check Fiddle
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" id="imgId1"/>
<div id="divId1" class="hideDivs">Div 1</div>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" id="imgId2"/>
<div id="divId2" class="hideDivs">Div 2</div>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" id="imgId3"/>
<div id="divId3" class="hideDivs">Div 3</div>
//jQuery
$("#imgId1").click(function(){
$("#divId2").hide();
$("#divId3").hide();
$("#divId1").show();
});
$("#imgId2").click(function(){
$("#divId1").hide();
$("#divId3").hide();
$("#divId2").show();
});
$("#imgId3").click(function(){
$("#divId1").hide();
$("#divId2").hide();
$("#divId3").show();
});

Count divs and add jquery to expand and collapse Text

I hope someone can help. There are 3 divs with employee-block class in the html code included. I would like to add javascript/jquery code to expand/collapse anything after the 2nd div (or employee-block div). This is my html:
<div class="employee-block">
<img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>
</div>
<div class="bottom"></div>
<div class="employee-block">
<div class="employee-details"><span class="red strong">support#.net</span><br /><p>testing description</p></div>
</div>
<div class="bottom"></div>
<div class="employee-block">
<img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>
</div>
<div class="bottom"></div>
I have this jquery code, but not sure how to plug it in. In my example html code I only want to hide/show the 3rd employee-block div, so really anything more than 2 because there could be more than 2:
<script type="text/javascript">
$(document).ready(function () {
$('div.view').hide();
$('div.slide').click(function () {
$('div.view').slideToggle(400);
return false;
});
});
Your question is not very clear for me, but look at this code:
$('a.createSomeButton').click( function() {
if ( ! $('#IwillCollapse').length ) {
$('.employee-block:gt(1)').wrap('<div id="IwillCollapse" />');
}
$('#IwillCollapse').slideToggle();
return false;
});
This should help you get on your way. There's many different ways to achieve what you want but this might be the easiest to grasp. http://jsfiddle.net/jSZxp/1/
var employeeBlocks = $('.employee-block').slice(2); //returns all after the first 2
employeeBlocks.addClass('hidden'); //attach the hidden class
$('button').on('click', function(){
employeeBlocks.toggle('hidden'); //toggles the hidden class
});

Categories