I have a button that toggles the playlistHolder div. In addition, when '.albumImage a' is selected, it also unhides the playlist. I am trying to change the text of the button to 'Show Playlist' if the playlist is hidden and 'Hide Playlist' if it is not hidden. I have tried click functions with if(('.playlist').is(:hidden)) but have not had any luck with getting it to work. I am new to Jquery so I understand that my code below can use much improvement, here is my setup now that works when the album image is selected as well as when the toggle button is selected without changing the text:
HTML
<div class="togglePlaylist">
<button id="togglePlaylistBT">Show/Hide Playlist</button>
<!-- POPUP LAUNCHER -->
</div>
<div class="playlistHolder">
<div class="componentPlaylist">
<div class="playlist_inner">
<!-- playlist items are appended here! -->
</div>
</div>
<!-- preloader -->
<div class="preloader"></div>
</div>
<div class="albumWrapper">
<div class="albumCovers">
<div class="albumImage"> <img class="img-responsive" src="media/music/Album_Covers/Swag_Brothers.jpg" alt="thumb" />
<p class="nowPlaying">Now Playing</p>
</div>
</div>
</div>
Javascript/JQuery
$('#togglePlaylistBT, .albumImage a').on('click', function() {
var $this = $('#togglePlaylistBT');
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide('slow');
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show('slow');
$this.text('Show Playlist');
}
});
Try this snippet of code:
$('.togglePlaylist button').on('click', function() {
var $this = $(this);
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide();
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show();
$this.text('Show Playlist');
}
});
Working JSFiddle
When you hide and show the playlist just run document.getElementById("togglePlaylistBT").value="Show Playlist";
For example:
function change()
{
var elem = document.getElementById("playlistButton");
if (elem.value=="Open Playlist") { elem.value = "Close Playlist"; closeBox(); }
else { elem.value = "Open Playlist"; openBox(); }
}
function openBox() {
alert("open");
}
function closeBox() {
alert("closed");
}
<input onclick="change()" type="button" value="Open Playlist" id="playlistButton"></input>
Make sure to change openBox() and closeBox() functions to your box code!
Related
I am trying to hide the div if you click only on the header. But my filter does not seem to work. I get the intended function wherever I click on the div. I want to restrict this to only when you click on the header.
<div class="post" onclick="updatenext()">
<h2>Item3</h2>
</div>
<div class="post" onclick="updatenext()">
<h2>Item4</h2>
</div>
<script>
var index=0;
$(".post").hide();
$(".post").eq(0).show();
// Tried this too: $(".post").filter(":header")....
$(":header.post").on("click",
function () {
index=$(this).index();
//console.log($(this).index());
$(this).hide();
$(".post").eq(index).show();
}
);
</script>
I expect the click to work only when clicking on the header element within each div.
Try using only jQuery for the event listener, like this:
<div class="post">
<h2 onclick="updatenext()">Item3</h2>
</div>
<div class="post">
<h2 onclick="updatenext()">Item4</h2>
</div>
<script>
var index = 0;
$(".post").hide();
$(".post").eq(0).show();
$("h2").on("click", function () {
index = $(this).parent().index();
$(this).parent().hide();
$(".post").eq(index).show();
});
</script>
I'm having trouble adding a link to a button inside a card. the card is wrapped in a div element which when clicked automatically expands and closes.
Is there anyway to remove this functionality just when clicking on the details button? So it acts as a normal link?
Here is the code:
https://codepen.io/candroo/pen/wKEwRL
Card HTML:
<div class="card">
<div class="card__image-holder">
<img
class="card__image"
src="https://source.unsplash.com/300x225/?wave"
alt="wave"
/>
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch
devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
Read more
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var zindex = 10;
$("div.card").click(function (e) {
e.preventDefault();
var isShowing = false;
if ($(this).hasClass("show")) {
isShowing = true;
}
if ($("div.cards").hasClass("showing")) {
// a card is already in view
$("div.card.show").removeClass("show");
if (isShowing) {
// this card was showing - reset the grid
$("div.cards").removeClass("showing");
} else {
// this card isn't showing - get in with it
$(this).css({ zIndex: zindex }).addClass("show");
}
zindex++;
} else {
// no cards in view
$("div.cards").addClass("showing");
$(this).css({ zIndex: zindex }).addClass("show");
zindex++;
}
});
});
You can check the target of the event and see if it is an <a> using is()
Something like:
$("div.card").click(function (e) {
// only run when not an `<a>`
if(!$(e.target).is('a')){
e.preventDefault();
//the rest of your code
....
}
});
I don't know Jquery but with javascript you can do this inside your code:
const links = document.querySelectorAll('.btn');
links.forEach(link => link.addEventListener('click', (e)=>e.stopPropagation()))
I found this code while looking for a way to create popups and it does work but I am trying to figure out how make it work with multiple dynamically created divs.
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
I would like to be able to use multiple buttons to control individual divs such as a button with id "pop1" will open the div "popup1" and button with id "pop2" will open div with id "popup2" etc.
<button id="pop1">Open popup</button>
<button id="pop2">Open popup</button>
<div id="popup1" class="popup">
<h2>This is my popup 1</h2>
<button name="close">Close popup</button>
</div>
<div id="popup2" class="popup">
<h2>This is my popup2</h2>
<button name="close">Close popup</button>
</div>
I create the buttons and divs dynamically with php so there is no set amount and I would like to make sure that they all work no matter how many are generated. For each new div it increments the number on the id like you can see above.
I tried doing this but the buttons will print everything in all available divs because I am not targeting them individually. I can't figure that part out.
$(document).ready(function () {
$("button[id*=pop]").on("click", function() {
popupOpenClose("[id*=popup]");
});
});
Anyone have any suggestions? Thanks.
I have made some change on your html as it would be easy to get element this way
<button id="pop_1" class="btnpopUpOpen">Open popup</button>
<button id="pop_2" class="btnpopUpOpen">Open popup</button>
<div id="popup_1" class="popup">
<h2>This is my popup 1</h2>
<button name="close">Close popup</button>
</div>
<div id="popup_2" class="popup">
<h2>This is my popup2</h2>
<button name="close">Close popup</button>
</div>
Jquery Code:
$("button.btnpopUpOpen").on("click", function(e) {
e.preventDefault();
var myID=$(this).prop('id').split('_')[1];
popupOpenClose('div.popup_'+myID);
});
$("form button[name=close]").off().on('click',function(e){
e.preventDefault();
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(this).parent().hide();
});
Note: If your are trying to add div dynamically after page is loaded.Make sure to re-register your event as well
I am new to web development. And I am stuck with one issue. I have implemented a flip functionality. Where if I click on the div, the element flips. Below is what I have tried.
<div class = "flip" id = "flip">
<div class = "front">
<div id = "chartAnchor1" class="x_content">
</div>
</div>
<div class = "back">
<div id = "abcanchor1" class="x_content">
</div>
</div>
</div>
Here abcanchor1 and chartanchor are the anchor where the actual template is embedded. I am using https://nnattawat.github.io/flip/ plug in to implement flip.
At present I am able to flip when the div is clicked. But I want that to happen on button click.
Code to flip :
$("#flip").flip();
But all it does is, it flips the element when clicked upon. So, default trigger is 'click' event.
I want the same functionality to work by cliking on a button rather than clicking on the div itself.
<button type="button" id = "toggle" class = "toggle">Click Me!</button>
Everything (flip) is working fine. All I want is to trigger the flip on a button click. It's given in this link: https://nnattawat.github.io/flip/ on how to implement the flip (toggle) on button click but I am not able to implement that. Can someone guide me.
EDIT
<script>
$(function()
{
$("#flip").flip({
trigger: 'manual'
});
$('#toggle').click(function() {
$("#flip").flip('toggle');
});
});
</script>
Error: When the button is clicked I get this error
firstDashboard.html:34 Uncaught TypeError: $(...).flip is not a function
EDIT 2:
Code Base:
<button type="button" id = "toggle" class = "toggle">Click Me!</button>
<div class = "flip" id = "flip">
<div class = "front">
<div id = "chartAnchor1" class="x_content">
</div>
</div>
<div class = "back">
<div id = "abcanchor1" class="x_content">
</div>
</div>
</div>
<script src="../Scripts/jquery.flip.js"></script>
<script>
$(function()
{
$("#flip").flip({
trigger: 'manual'
});
$('#toggle').click(function() {
$("#flip").flip('toggle');
}); });
</script>
Error: Uncaught TypeError: $(...).flip is not a function
:
Please check this demo: https://jsfiddle.net/hv83LLbw/
You need to set trigger to manual:
$("#flip").flip({
trigger: 'manual'
});
and then attached the click event handling:
$('#toggle').click(function() {
$("#flip").flip('toggle');
});
The over all
$(document).ready(function() {
$("#flip").flip({
trigger: 'manual'
});
$('#toggle').click(function() {
$("#flip").flip('toggle');
});
});
You can do this by hooking a click event to that button and calling flip() within the event handler, like this:
<div class="flip" id="flip">
<div class="front">
<div id="chartAnchor1" class="x_content"></div>
</div>
<div class = "back">
<div id="abcanchor1" class="x_content"></div>
</div>
</div>
<button type="button" id="toggle" class="toggle">Click Me!</button>
$('#toggle').click(function() {
$('#flip').flip();
});
I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle
if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;
This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here
Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.
Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}