Hi friends I have issue with divs.
I have a link show/hide dive on my page on clicking which i have to show or hide specific divs.
I am successful with doing it.
But my issue is that whenever I click on that link div is get hide or shown but page get directly on the top & I have to scroll to down again.
I don't want to scroll this and don't want to get to top.
Please help me out with this.
Thank You in advance.
Update:
Friend I got the answer from one of my friend.
Actually I was using
Because of href="#" URL get changed and page got to top every time I click on that link.
Are you trying to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<div id="container">
</div><!-- end of #container div -->
<a id="showdiv">Show the div</a>|<a id="hideDiv">Hide the div</a>|<a id="toggle">Toggle</a>
</div><!-- end of #wrapper div -->
</body>
</html>
Here's the css:
#container {
width: 300px;
height: 300px;
background: red;
margin-bottom: 20px;
}
#wrapper {
margin: 40px auto;
width: 400px;
}
And here's the jquery
$(function() {// When document is ready, run this...
//Get hold of the link with the id #showdiv and do something when you click it
$("#showdiv").click(function() {
// Grab the div with the id #container and show it
// Alert me when you're done
$("#container").show(2000, function() {
alert("I'm done showing");
});
});
//Get hold of the link with the id #hideDiv and do something when you click it
$("#hideDiv").click(function() {
// Grab the div with the id #container and hide it
// Alert me when you're done
$("#container").hide(2000, function() {
alert("I'm done hiding");
});
});
// Toggle - This is like a On/Off Switch
//Get hold of the link with the id #toggle and do something when you click it
$("#toggle").click(function() {
// Grab the div with the id #container and show if hidden / hide if shown
$("#container").toggle(2000);
});
});
Of course you'd have to link to a copy of jQuery before using the script above.
Here's a link to a demo: http://jsfiddle.net/tonystark/HhNBA/
Assuming you have a link
Inline (not recommended but likely what you have)
<script>
function showhide(id) {
var elem = document.getElementById(id);
elem.style.display=elem.style.display=="none"?"block":"none";
return false; // MANDATORY
}
</script>
Toggle
<div id="someId">Show or hide me when you click a link</div>
You have to cancel the default behavior of the onclick handler of your link. For doing so, don't use return false in your click handler, but rather use event.preventDefault():
HTML:
hide me
<div id="#targetdiv">blah</div>
Javascript:
document.querySelector('a.foo').onclick = function(event) {
try {
document.querySelector(this.getAttribute('href')).style.display = 'none';
} catch (e) {
console.error("couldn't find element to hide");
}
event.preventDefault();
}
JQuery:
$('a.foo').click(function(event) {
try {
$($(this).attr('href')).hide();
} catch (e) {
console.error("couldn't find element to hide");
}
event.preventDefault();
})
More informations:
http://www.quirksmode.org/js/events_early.html
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
It happens because your link is pointing to something like #foo or just #, whereas it should not have a href (or have an empty one)...
remove the href attribute and apply a text-decoration style
<a style="text-decoration: underline;" title="click me"></a>
that'd seem to make more sense than applying an href you dont want, to block its normal operation later. an alternative for graceful degradation would be to use the href to point to the shown/hidden div, displaying normally by default and having javascript hide it where javascript is available.
"Change your anchor (link) to a span so that it doesn't have that behaviour. Then, style it using css so it looks how you want it to look."
i often use that techique. i.e., use a span or div with an onclick, styled with text-decoration: underline, cursor: pointer and possibly display: inline if you decide on a div. one caveat is that in IE6, css hover won't work on anything other than an anchor. that's easily fixed with javascript.
you could probably remove the href attribute completely. anchors have advantages as above (cross-browser :hover styles) and allow for a title attribute for tool tips etc.
you probaby have a # in href attribute like href=# please remove hash and instead of that write href='javascript:void(null);'
Related
I know you can navigate to a section in the page using anchor tags, but doing this adds unwanted keywords to the URL.
So if the original URL was www.xyz.com, clicking on an anchor tag abc would change the URL to www.xyz.com/#abc. I do not want the URL to change since this every time you click on "back", it just goes to the previous section that the URL held previously. Is there any way to stop this from happening? Maybe reroute the back button to leave the website or something?
Have you tried using JavaScript? Use scrollintoview function.
Here's an example:
<a onclick="scrollthere()">go to the content<\a>
<h1 id="stophere">This is content</h1>
<script>
function scrollthere(){
var element = document.querySelector("#stophere");
element.scrollIntoView();
}
</script>
Something like that. Onclick is an event. And in brackets we write function that we want to execute when clicked on it. In our case it's scrollthere which scrolls to our h1 element that has is "stophere". It will scroll untill our element won't get into view. You could read more about it here . Good luck with your website. I'm making website as well :).
My solution is to use JS instead of using <a> behavior.
for example
document.querySelectorAll("a").forEach((item, idx) => {
item.addEventListener("click", (e) => {
e.preventDefault();
const hash = e.target.hash;
window.scrollTo({
top: document.querySelector(hash).offsetTop,
behavior: "smooth"
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.section {
width: 100%;
height: 100vh;
}
.sec-1 {
background-color: salmon;
}
.sec-2 {
background-color: teal;
}
Section 1
Section 2
<div id="sec-1" class="section sec-1"></div>
<div id="sec-2" class="section sec-2"></div>
In my case, I use the scrollTo() property.
Hope this might help you.
You can set your href attribute to empty string.
abc
I have two "ul" list. With javascript a remove childrens from the second list and add inside the first ul list. But while the page is loading the second menu appears unstyled. see here and the web
Here is the code. #main-menu and #section menu are the ul lists:
//dinamyc main menu
if( $('body').hasClass('page-template-templateshome-page-php') ){
$('#section_menu').children().each(function(i, e){
var firstLi = '#' + $('.navbar').next().attr("id");
$('.home .menu-item-home a').removeClass('external').attr( "href", firstLi );
if($('#main-menu div ul li').is($(e).insertAfter('#main-menu ul li:eq(0)'))){
$(e).insertAfter('#main-menu ul:eq(0)');
}
$('#section_menu').css('display','none');
});
}else{
$('#section_menu ').children().remove();
$('#section_menu').remove();
}
CSS:
#section_menu { display:none; }
<div id="hidden-during-page-load">Loading...</div>
$(window).load(function(){
// this will ensure that all content has loaded before the div is shown
$("#hidden-during-page-load").show();
});
#hidden-during-page-load {
display:none;
}
try like this
<div id="mydiv" style="disply:none">somedata</div>
then make that div whenever you want. If you want to show it in page load,
$(document).ready(function(){
//after executing some functions
$("#mydiv").show()
});
Have you tried puting a breakpoint inside your each function?
That'd confirm that that process is causing the glitch. (or you can also add a small delay in it)
Put the breakpoint and do what you've been doing so far, if the menu remains that way until you let it continue, it means you need to change your logic: Hide the menu during processing and only show it when the process is complete.
You could create a css rule to hide the second list for example:
.hidden-list {
visibility: hidden
}
If after loading you want to see the second list, just listen to the ready event and remove the class.
$(document).ready( function($) {
$('ul').removeClass('hidden-list'))
// Do something else if needed
});
I have a content structure like this:
Click me.
<p class="hidden_content">This content is toggleable.</p>
Click me.
<p class="hidden_content">This is a different section.</p>
Click me.
<p class="hidden_content">This section is also different.</p>
I have already discovered how to make this work with one section, but how can I make it so that when I click on a toggle_button it opens only the nearest hidden_content class.
$('a.toggle_button').click(function() {
$(this).next('p.hidden_content').toggle();
}
http://api.jquery.com/next/
Simply try
$("a").click( function(){
$(this).next('p').toggle();
});
Working Demo
It's easy with JavaScript but you could also stay with plain CSS with the :target selector --
Click me.
<p id="hiddenContent1" class="hidden_content">This content is toggleable.</p>
<style>
.hidden_content{
display:none;
}
.hidden_content:target{
display:block;
}
</style>
Here's a Fiddle
This will toggle the following div, and stop the page returning to the top:
$('a.toggle_button').click(function(e) {
e.preventDefault();
$(this).next('p.hidden_content').toggle();
}
Use the jQuery .next() selector
$(".toggle_button").on("click", function () {
$(this).next(".hidden_content").toggle();
});
If I set the searchbox display to block then by using JavaScript I can set it back to none, but I have the following code, but after making display none, I can't set it to block display.
#searchbox
{
width: 50%;
height: 400;
float: left;
display: none;
}
document.getElementById('searchbox').style.display = 'block';
Your JavaScript code is fine, you just need to make sure you're running after the element exists. That means in response to a user-generated event, or just using a script element further down in the markup than the #searchbox element.
For instance, this won't work: Live Example | Source
<script>
document.getElementById('searchbox').style.display = 'block';
</script>
<!-- ...other stuff... -->
<div id="searchbox">I'm hidden</div>
...because the element doesn't exist as of the call to document.getElementById.
But this does work: Live Example | Source
<div id="searchbox">I'm hidden, but then shown</div>
<!-- ...other stuff... -->
<script>
document.getElementById('searchbox').style.display = 'block';
</script>
...because the element does exist.
This is one of several reasons for the usual recommendation to put your scripts at the end of the document, just before the closing </body> tag.
More:
YUI Best Practices for Speeding Up your Website
Google Closure engineers on when DOM elements are ready to be used from script
Side note: You have an error in your CSS. height: 400; should be height: 400px; (you need the units). So I suppose if you don't have any content in the div, you might be wondering why you don't see it (and the reason is: because it has no height).
If it is not working then use
<script>
document.getElementById('searchbox').style.visibility = 'hidden';
</script>
May be it will help you there
Well, you can then define two JavaScript functions, one to hide and one to show your searchbox, as you said it works fine if you set it to block initially.
Okay, then use the hide function to hide your searchbox on pageload event and on onclick event call hide function. It will definitely work.
#searchbox
{
width:50%;
height:400;
float:left;
display:block;
}
function hide()
{
document.getElementById('searchbox').style.display = 'none';
}
function show()
{
document.getElementById('searchbox').style.display = 'block';
}
It should be set to .style.display = "inline"; instead of block. Block is for div and p (all the way across). Inline is for span and input (not all the way across).
I have a page with a linked image, where the link takes a bit of time to load. Therefore, users tend to click multiple times on it. This occasionally causes errors to crop up in the code. How do I prevent users from clicking on the link more than once?
In an attempt to remedy this, I changed the link to an onClick event and then in the function I used the code:
$('#myImageId').unbind('click');
window.location.href = "myLink";
However, that doesn't seem to be helping. Also, I'd prefer to keep it a simple linked image instead of using javascript.
Once solution is to add a class to the element that is used as a flag to determine of the code should run.
Here's an example: http://jsfiddle.net/qLhr8/
$('#myImageId').click(function() {
var $th = $(this);
if( !$th.hasClass( "pending" ) ) {
// Add the "pending" class, so subsequent clicks will not
// run the code inside this if()
$th.addClass( "pending" );
window.location.href = "myLink";
// you could do a setTimeout to remove the class
// if the new page never loads
}
});
With the added class, you can also change the look of the image (lower its opacity perhaps) to indicate that it shouldn't be clicked again.
.pending {
opacity: .4;
filter:alpha(opacity:40);
cursor: wait;
}
<img src="..." id="myImageId">
$('#myImageId').bind('click', function() {
$(this).unbind('click');
/* do long time task....
});
if your image is wrapped by a link the code will be
<img src="..." id="myImageId">
$('#myImageId').parent().bind('click', function(evt) {
$(this).unbind('click');
/* do long time task....
evt.preventDefault();
});
A hacky CSS solution that might/might not work: create another image element, without the link and make it a sibling to the link, like this:
<div>
<img src="my_img.png" id="img_link" alt="GO" />
<img src="my_img.png" id="img_nolink" alt="GO" />
</div>
Now apply this CSS:
#img_nolink { display: none; position: relative; top: -200px; /* Height of the image */ }
#link:active + #img_nolink { display: block; }
This should show the non-link image when the link is clicked (theoretically).