document.getElementById('otherButton').addEventListener('click', function () {
document.getElementById("step-4").style.display = 'block'
});
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>
<div class='col12 pad4 contain fill-navy dark clip'>
<div class='center quiet'>Map Canvas</div>
<div class='pin-right pad2'>
<a href='#step-4' class='button'>Trigger</a>
</div>
<div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
<a href='#' class='fill-darken2 pad1 icon close'></a>
</div>
</div>
<div id='otherButton' class='button'>otherButton</div>
I am using this example (shown above) as a guide for html and css on my webpage. In the example, we see that clicking on the button whose href=#step4 will display the div with id step-4
In javascript, if I want to open this exact same div on click, how would I do this ? For your reference, the css page is here
document.getElementById('otherButton').addEventListener('click', function () {
document.getElementById("step-4").style.display = 'block'
});
doesn't work. What am I doing wrong here?
The CSS trick the example uses is that it looks at the :target pseudo-class.
When you click on the anchor, the fragment-identifier is set as the hash of your page, and your step-4 element is then the one which matches this selector, activating the transform: translateX(0) rule, which will make the element visible.
So what you want is actually to trigger the :target pseudo-class programmatically.
And this can be achieved by manipulating the location.hash property.
btn.onclick = e => {
location.hash = "myDiv";
}
div:target{
color: red;
}
<div id="myDiv">Hello</div>
<button id="btn">click me</button>
Or with your example:
document.getElementById('otherButton').addEventListener('click', function () {
location.hash = 'step-4';
});
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>
<div class='col12 pad4 contain fill-navy dark clip'>
<div class='center quiet'>Map Canvas</div>
<div class='pin-right pad2'>
<a href='#step-4' class='button'>Trigger</a>
</div>
<div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
<a href='#' class='fill-darken2 pad1 icon close'></a>
</div>
</div>
<div id='otherButton' class='button'>otherButton</div>
The problem is not that the display is none, or that visibility is set to hidden. The problem is that the div has a class called 'offcanvas-left' that translates it off the canvas (and the canvas has overflow set to hidden). If you want to signal the div coming into view you can translate it right or simply remove the class 'offcanvas-left'.
document.getElementById('otherButton').addEventListener('click', function () {
document.getElementById("step-4").classList.remove('offcanvas-left');
});
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>
<div class='col12 pad4 contain fill-navy dark clip'>
<div class='center quiet'>Map Canvas</div>
<div class='pin-right pad2'>
<a href='#step-4' class='button'>Trigger</a>
</div>
<div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
<a href='#' class='fill-darken2 pad1 icon close'></a>
</div>
</div>
<div id='otherButton' class='button'>otherButton</div>
You will need to have style like attribute in your html tag if you wanna to access it.
Here is example :
document.getElementById('otherButton').addEventListener('click', function () {
alert(document.getElementById("step-4").style.display)
document.getElementById("step-4").style.display = 'none';
} , false);
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>
<div class='col12 pad4 contain fill-navy dark clip'>
<div class='center quiet'>Map Canvas</div>
<div class='pin-right pad2'>
<a href='#step-4' class='button'>Trigger</a>
</div>
<div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate' style="display:block;">
<a href='#' class='fill-darken2 pad1 icon close'></a>
</div>
</div>
<div id='otherButton' class='button'>otherButton</div>
Related
I'm currently working on a blog layout with a main div and a side bar with links. I want each link to change the content of the main div.
I tried using toggle and html.
Here's the main class and the content of each link:
<div id="main"></div>
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
And the side bar:
<div id="mainlink">
<button class="linkd" id="butt1"> works </button>
<button class="linkd" id="butt2"> info </button>
<button class="linkd" id="butt3"> Tags </button>
</div>
So when I click on the button "works" I want the content of that div into the main div.
Here's the snippet of the JQuery (that doesn't work):
$(function(){
$('#butt1').click(function() {
$('#main').html($('#works'));
$('#works').toggle();
$('#info').hide();
$('#tags').hide();
});
$('#butt2').click(function() {
$('#main').html($('#info'));
$('#info').toggle();
$('#works').hide();
$('#tags').hide();
});
$('#butt3').click(function() {
$('.mainp').html($('#tags'));
$('#tags').toggle();
$('#info').hide();
$('#works').hide();
});
});
Note: on my CSS I have the display: none as well.
I think it is the easy way to show and hide divs, by assigning a relation to the buttons using HTML5's data attribute (here their ids are used in data-target attribute). See the snippet below...
$(function(){
$('[data-target]').on('click', function(){
var target = $(this).data('target');
$(target).siblings().hide().end().show();
});
});
#main > div:not(:first-child) {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">
<button class="linkd" data-target="#works"> works </button>
<button class="linkd" data-target="#info"> info </button>
<button class="linkd" data-target="#tags"> Tags </button>
</div>
<div id="main">
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
</div>
I am using navigation drawer of Framework7 plugin on my hybrid app. The drawer can be open/close using the button as well as using swipe/slide left/right.
Now when the navigation drawer was open, the class <div class="panel panel-left panel-reveal"> added another class which is active class.
So when opened: <div class="panel panel-left panel-reveal active ">
when closed: <div class="panel panel-left panel-reveal>
Based on that event, is it possible to add style to other class?
Example is this class: <div class="views"> to <div class="views" style="opacity: 0.5">
What to accomplish: When the drawer is open, the class view will add style, when drawer is close remove the view class style.
Is it possible to catch that event and accomplish what I would like to do?
Sorry for the delay, so below is the sample code to add a css class to a div only on hover event. I have done this using html and css only. (No DOM manipulation).
<!doctype html>
<html>
<head>
<style>
a.ex1:hover{color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
.open-close{ display: none;}
a.ex6:hover .open-close{display: block;}
</style>
</head>
<body>
<p>
<a class = "ex1" href="#"> This link changes color </a>
</p>
<p>
<a class = "ex2" href="#"> This link changes font-size </a>
</p>
<p>
<a class = "ex3" href="#"> This link changes background-color </a>
</p>
<p>
<a class = "ex4" href="#"> This link changes font-family </a>
</p>
<p>
<a class = "ex5" href="#"> This link changes text-decoration </a>
</p>
<p>
<a class = "ex6" href="#">
<div>This link displays another div by detecting change in class</div>
<div class="open-close">
Here you can add your content to hide/show/modify elements based on the classes
</div>
</a>
</p>
</body>
</html>
NOTE - Just remember to use the appropriate CSS selector based on your HTML structure.
Hope this helps. Let me know if you have any questions. Happy to help.
Hi Yes it is Possible. Using HTML and Javascript itself. You can also achieve this using JQUERY DOM manipulation. Let me know which one would you want to know.
I have modified your HTML a little
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">Just to see if his appears in green on fire of a single common event</div> <!---it adds "active class" e.g. <div class="panel panel-left panel-reveal active"> -->
<div class="views"> Just to see if this appears in red on fire of a single common event<!--this should toggle change background, i mean add background color when class panel has active class then remove the bgcolor when active class remove (vise versa) -->
<div class="view view-main" data-page="home">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<button onclick="myFunction()" type="button" class="open-panel fa fa-bars button-nav"> I am button 1</button>
</div>
<div class="center" style="left: -6.5px;"></div>
<div class="right">
<button type="button" id="refresh" class="button-nav"> <i class="el el-refresh"></i> I am button 2</button>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block"> content here... </div>
</div>
</div>
</div>
</div>
</div>
Just add this JavaScript function and you will be good to go.
function myFunction(){
$(".panel-reveal").addClass("active");
if($(".panel-reveal").hasClass("active")) {
$(".views").addClass("change")
}
}
CSS will be
.active{
background-color: green !important;
}
.change{
background-color: red !important;
}
I hope this helped.
I have multiple(it can be 100+) collapsible div (using bootstrap)
<div>
<a href="#id1" data-toggle="collapse">
<div class="col-lg-12">Title</div>
<div class="image">Image</div>
</a>
<div id="id1" class="collapse">
<div class="col-lg-12">Description</div>
</div>
</div>
<div>
<a href="#id2" data-toggle="collapse">
<div class="col-lg-12">Title</div>
<div class="image">Image</div>
</a>
<div id="id2" class="collapse">
<div class="col-lg-12">Description</div>
</div>
</div>
And have Jquery
$('#id1').on('show.bs.collapse', function () {
$(".image").addClass('hidden');
});
$('#id1').on('hidden.bs.collapse', function () {
$(".image").removeClass('hidden');
});
I want to add hidden class on show.bs.collapse(this is from bootstrap) and remove hidden class on hidden.bs.collapse'With the jq code above I can do this just with one div that has id1. But how can I do this independently?
Try not to subscribe on the elements by ids but by element type
$('a').on('show.bs.collapse', function () {
$(this).next().find("div.image")[0].addClass('hidden');
});
$('a').on('hidden.bs.collapse', function () {
$(this).next().find("div.image")[0].removeClass('hidden');
});
Where
$(this)
should return a pointer to the collapsed/uncollapsed element
next()
should move pointer to the next element ( div id="id1" as example)
find("div.image")[0]
will find div with class "image" and take the first found element
then you can hide the image in this block or show it without using ids
If you're using
$(".image").addClass('hidden');
this will hide all the images in all blocks (not only in that one that has been collapsed)
Id refers to one element on the DOM therefore you should use classes instead. Therefore you should select divs based on their classes.
The following is a possible solution:
<div>
<a href="#id1" data-toggle="collapse">
<div class="col-lg-12">Title</div>
</a>
<div class="some-class collapse ad-col-2">
<div class="col-lg-12">Description</div>
<div class="image"></div>
</div>
</div>
<div>
<a href="#id2" data-toggle="collapse">
<div class="col-lg-12">Title</div>
</a>
<div class="some-class collapse ad-col-2">
<div class="col-lg-12">Description</div>
<div class="image"></div>
</div>
</div>
Jquery:
$('.some-class').on('show.bs.collapse', function () {
$(".image").addClass('hidden');
});
$('.some-class').on('hidden.bs.collapse', function () {
$(".image").removeClass('hidden');
});
I am trying to create a comparison overlay that shows items selected by users when they 'add to compare' link.(like one in flipkart that appears on top when you hit add to compare). Here is my code:
<div class="college-list-container">
<div class = "individual-college-container" id="text1">
<div class="image-header"><h3>text1</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison" id="comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container">
<div class="image-header"><h3>text2</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container" id="itm">
<div class="image-header" ><h3>text3</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
Javascript
/show overlay when one checkbox is checked and add its name/image to the empty space
$('.comparison').click(function(e){
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
e.preventDefault();
var clg = $("<li></li>")
clg.text(clgId);
var removeLink = $("<a href=''>(Remove)</a>");
clg.append(removeLink)
$('.comparison-colleges').append(clg);
$('.add-to-compare-overlay').show("slide", { direction: "up" }, 300);
});
I want the text in the div containing class 'image-header' to be assigned to the variable clgId. The problem that i am facing with my code is that it is adding the text of all the divs containing class 'image-header'. Ex i want the value text1 to be assigned on clicking add to compare of the div with id text1. However it assigns 'text1 text2 text3' to clgId.
Please help
I've created a JSFiddle with what I think is your desired functionality (I included a console log output in the script of the clgId variable):
http://jsfiddle.net/py38kuvv/
I replaced the parentsUntil function with the closest function (and replaced the individual-clg-container class selector):
var clgId = $(e.target).closest('.individual-college-container').find('.image-header').text();
and also updated your click handler:
$('.comparison').on( "click", function(e) {
In order to get a quicker response in future, posting a JSFiddle of what you have so far makes it easier for others to help :)
It is adding all of them because
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
should be
var clgId = $(this).parentsUntil('.individual-college-container').find('.image-header').text();
Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...
I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">AAA</div>
<div class="container" id="content-b">BBB</div>
</div>
</div>
// set content on click
$('.button').click(function (e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
from here:
jsfiddle
What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?
Many thanks in advance for any help!
Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing.
Here's an example of how this works:
http://jsfiddle.net/ivanbatic/b43m405x/
Javascript:
$('.activator').on('click', function () {
var target = $(this).attr('data-target');
$('.panel').removeClass('active');
$(target).toggleClass('active');
});
HTML
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
<section>
<div class="panel active panel-a">First Panel</div>
<div class="panel panel-b">Second Panel</div>
</section>
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
</section>
Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action.
If you want buttons to look like plain text, use CSS for styling.
You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags
function setContent($el) {
var rel = $el.data('rel');
$('.active').removeClass('active');
$('.container').hide();
$('[data-rel="' + rel + '"]').addClass('active');
$(rel).show();
}
$(function() {
// the right place to fire the initial setContent (all scripts are ready and page is loaded)
setContent($('.button.active'));
// add event handlers in ready event (DOM is most surely there)
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
});
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
</div>