I am using onclick method on a link in order to display a div. However, the div disappears after displaying for a second.
function view() {
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
display: none;
}
<header>
<div id="topbar">
<img src="/images/santorini-wedding-photographer-logo.png" style="float: left;">
<span style="float: right;">MENU</span>
</div>
<div id="topmenu">
some text here
</div>
</header>
Your anchor tag has a href attribute, which is following the link and changing the page contents. Remove the HREF ( which is actually a bad idea ), or better yet; use a span or something instead.
FYI: There are also multiple other solutions available to keep the href, but prevent the page from changing location.
function view() {
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
display:none;
}
<header>
<div id="topbar">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png" style="float: left;">
<span style="float: right;"><a onclick="view()">MENU</a></span>
</div>
<div id="topmenu">
some text here
</div>
</header>
In your anchor tag, set your href to href="#!" so that the event doesn't propagate. And your code for the div to show works as expected.
It would also work with href="#", but this would take you back to the top of the page in case you're somewhere at the bottom.
Related
I have an card component which I wrapped with tag. In the tag, I have added some button. Now the problem is when I click on the button then the tag sends me to the URL but I don't want to go to a page when I click on a button.
I have tried event.stopPropagation() but It didn't work with tag. So, if there is any way to solve it please let me know.
Thank you
<a href="/somewhere1">
<button>Hide</button>
<div>
<div>
<img src="https://dummyimage.com/200x200/000000/fff" alt="" />
<span>name</span>
</div>
Title
</div>
</a>
Here I want that the <button></button> tag will be unlinkable.
heres a little example how you could manage to do it.
const wrapperRef = document.querySelector('#wrapperRef');
wrapperRef.addEventListener('click', (event) => {
if(event.target === wrapperRef.querySelector('button')){
event.preventDefault();
//what should happen if you click on button
}
})
<a id="wrapperRef" href="/somewhere">
<button>Hide</button>
<div>
<div>
<img src="" alt="" />
<span>name</span>
</div>
</div>
</a>
You catch the click inside the wrapping a tag, then check if the target that has been clicked on is equal to the inside button. If so you stop redirecting and can add code (I think hiding the href) in the function.
Would be an addition of:
wrapperRef.style.display = 'none'
or delete it out of the dom:
wrapperRef.parentNode.removeChild(wrapperRef);
It's not an good idea to have nested links inside link. Instead you can wrap your card items in div wrapper and locate this whole-card-size link inside it and style it. In Code Snippet below it's called
.outer-link. We can stretch it to card size, so whole card will be clickable; Items, that also should be clickable inside this card could be moved in front of stretched links:
.inner-link,
.toggle-button {
...
}
In this case you don't have to create any JS code to override links behaviour, check Code Snippet:
const btnTrigger = () => {
console.log('click');
}
.card {
position: relative;
}
/* make link card-size */
.outer-link:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #ff634721;
}
/* make inner link and button be in front of full-size link */
.inner-link,
.toggle-button {
position: relative;
z-index: 1;
}
<div class="card">
<button class="toggle-button" onclick="btnTrigger()">Hide</button>
<div>
<div>
<img src="https://dummyimage.com/200x200/000000/fff" alt="" />
<span>name</span>
</div>
<a class="inner-link" href="/somewhere2">Title</a>
</div>
<a class="outer-link" href="/somewhere1"></a>
</div>
I've had a look at related answers but none are what I am looking for... I think. Apologies if I am duplicating a question.
This HTML is used many times on a page, within a product box and is displayed on a product category page.
<div class"all-buttons-container">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2 **hidden**">text</a>
</div>
</div>
In this (much simplified) HTML I have a container which houses 2 siblings.
- Each sibling contains an anchor.
The button containers are always visible.
Sometimes, the .button2 anchor also has the bootstrap class of hidden so the anchor is no longer displayed. This is done in each of the product boxes depending on the need to have the second button for that product. I am not in control of this.
When the .button2 anchor has the hidden class I need to add some margin-top to button1-container to vertically center it
I was going to use pure style (flexbox) but it wasn't achieving what I needed.
I would like to run a little jQuery or pure JS every time the page finishes loading which adds some the top margin, if required, on each instance of this HTML. I don't like having to do this but will need to if I cannot find another simple way of controlling it.
Any thoughts... solutions... perfect solutions etc?
Thanks in advance!
cheers
wayjo
I suppose I've fully understood your question.
You can achieve this without JS, in a cleaner any.
Why not make a custom class of button2-hidden and attach it to all-buttons-container?
<div class"all-buttons-container button2-hidden">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2">text</a>
</div>
</div>
Then you have this CSS:
.button2-hidden .button2-container{
display: none; // or visibility -- whatever you want
}
.button2-hidden .button1-container{
margin-top: 1rem;
}
If you can add a div to contain the buttons, than you can use the snippet below:
.all-buttons-container{
display: flex; /* important part */
align-items: center; /* important part */
padding: 10px;
background-color: grey;
width: 200px;
border: 2px solid #fff;
height: 150px;
}
.hidden {
display: none!important;
}
.all-buttons-container > div a{
display: inline-block;
background-color: blue;
padding: 7px;
margin: 7px;
color: #fff;
}
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2 hidden">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1 hidden">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>
Would it be possible to have the internal page reference hide/unhide an element.
<div class="hidden">
<div id="thanks">
<h1>Thank you!</h1>
<p></p>
</div>
</div>
So you would visit "http://www.website.com/#thanks" and the div "hidden" would be hidden / vice versa
Yes, using the :target pseudo class.
#main {
display: none;
}
#main:target {
display: block;
}
main
<div id="main">
main section
</div>
Alternatively, you can nest hidden content inside of the :target like this.
.hidden {
display: none;
}
:target .hidden {
display: block;
}
main
<div id="main">
<div class="hidden">
main section
</div>
</div>
You can use the following JavaScript to get the value after hash (#) from a URL.
var hash = location.hash.substr(1);
You can then hide/unhide based on the results.
how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture
add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link
The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle
I have a div whose display is "none" in css: display:none;. And it is supposed to stay hidden even after the page loads but while the page is loading it is being displayed like a flash, for a second, and hiding again.
Is there any way, with JQuery, that I can override it to stay hidden during the entire operation?
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7" >
<div id="documentStatus_div">...</div>
</div>
This code defiantly work for you...
CSS Code :
<style>
.display_none {
display: none;
}
</style>
HTML Code:
<div id="dispnone" class="display_none">123</div>
JQuery Code:
$("#dispnone").removeClass("display_none");
setTimeout(
"$('#dispnone').addClass('display_none');",
2000);
First, be sure to add your css link between <head> tag.
Please clear cache and test again. If your css file is too large, you can set inline style for hidden this div.
If you want to hide with jquery, you can disable like this $("#documentStatus_div").prop("disabled").
Try setting the style as display:none for both the divs :-
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7" style="display:none">
<div id="documentStatus_div" style="display:none>...</div>
</div>
Are you looking for some like this? Cause this is what I understand. If not, pls tell me.
function showDiv(){
$('.div-flash').slideToggle(300)
$('.div-flash').delay(500).slideToggle(500);
};
showDiv();
body{
background: #000;
color: #fff;
}
.div-flash{
display: none;
background: #fff;
color: #000;
border-radius: 10px;
width: 100px;
padding: 25px;
margin: 50px auto;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
This is all doc
</div>
<div class="div-flash">
This will show and hide
</div>
The possible reason for this is your CSS file is taking time to load.
Method 1: Use an inline style
<div id="documentStatus_div" style="display:none>...</div>
Method 2: Check CSS link is present in <head> section
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7" style="display:none;">
<div id="documentStatus_div">...</div>
</div>