Hi i hope someone can help. i want to hide the fragment identifier from the address bar so instead of:
www.mydomain.com/example.html#something
i just get:
www.mydomain.com/example.html
when i click on an anchor tag.
I have looked at lots of related questions and forums but still can't quite figure it out. I'm pretty sure i should be using something along the lines of:
window.location.href.replace(/#.*/,''); //and or .hash
put just cannot figure it out.
localScroll plugin allows you to hide or keep the identifiers and by default they are hidden. i think many gallery plugins have a similar option too.
but when i try and do it myself (bit of a novice) i get crazy to no results.
below is some basic example script i would like it to work with:
<style>
.wrap{
width:300px;
height:200px;
margin:auto;
}
.box{
width:300px;
height:200px;
position:absolute;
display:none;
}
#one{background:red;}
#two{background:blue;}
#three{background:green;}
.load{display:block;}
</style>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="wrap">
<div id="one" class="box load">This is Box 1</div>
<div id="two" class="box">This is Box 2</div>
<div id="three" class="box">This is Box 3</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("ul li a").click(function(){
$("div.box").fadeOut(1000);
$($(this).attr('href')).fadeIn(1000);
});
});
</script>
</body>
Add
return false;
at the end of your click function, it will stop this event propagation
the replace function returns a new string, it doesn't operate on the old one. You need to use: window.location.href = window.location.href.replace(/#.*/,'').
However, this will not have the expected effect, as changing window.location.href in any way that's not just adding or changing a hash tag causes a page reload.
The localScroll plugin works by searching for the hashtag and using the jQuery scrollTo plugin to scroll to the location, and preventing the default behavior of the browser when you click on a link with a hash tag. They haven't actually changed the URL to remove the hash, they've prevented it from ever appearing.
The best you can do if you want to remove the hash from the URI is to keep just the # at the end:
window.location.href = window.location.href.replace(/#.*/,'#');
Although in some older browsers, even this will trigger a page reload (only very old browsers, though).
try this....it will remove # globally in your url
window.location.href.replace(/\#*/g, "")
here is DEMO
Related
I have already posted this but I am going to explain it better with a jsFiddle. Hence, the repost.
I apologize if this has already been asked but I have been looking everywhere and I can't find any help at all.
I have made 'tabs' using anchors with href='#'. However, what I want is when I click button1 it changes the url to www.myurl.com/btn1 and when I click button 2 - www.myurl.com/btn2.
When I visit www.myurl.com/btn1 I want button1 to be highlighted as it is when clicked on the jsFiddle.I've searched everywhere but found no way of doing this.
The simplest way to do this is by using the fragment of the URL to store the id of the tab, ie. myurl.com#tab1. You can then check on load if the URL has a fragment (using location.hash) and set the default tab and you can use the exact same mechanism in the href attribute of the a elements you use to change tabs. Try this:
$('.tab-trigger').click(function() {
showTab($(this).attr('href'));
})
if (window.location.hash)
showTab(window.location.hash);
function showTab(tab) {
$('.tab-content').hide();
$(tab).fadeIn();
}
.tab-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Button 1
Button 2
Button 3
<div id="div1" class="tab-content">div 1</div>
<div id="div2" class="tab-content">div 2</div>
<div id="div3" class="tab-content">div 3</div>
I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
I need some help.
I tried to make a simple project on JSFiddle, but I can't get it to work.
http://jsfiddle.net/reUyp/2/
Here's the code
HTML:
<div id="img0">
<b class="i01">ONE</b> <b class="i02">TWO</b> <b class="i03">THREE</b>
</div>
<div style="width:200px; height:500px; background-color:red;" id="i01"></div>
<br>
<div style="width:200px; height:500px; background-color:blue;" id="i02"></div>
<br>
<div style="width:200px; height:500px; background-color:green;" id="i03"></div>
<br>
JavaScript:
$(function(){
$('#img0 b').click(function(){
CL=$(this).attr('class')
st=$('#'+CL+'').offset().top;
$('body,html').animate({scrollTop: st}, 500);
return false;
});
});
What I want is that when you click on one of the words, the page should scroll to the corresponding colored div. But it doesn't...
What am I missing? I'm sure it's a really stupid thing...
Oh, and is there actually a better way to accomplish this?
Since you are using jQuery, you have to include it into your jsFiddle project. Select it in the top left corner and your sample will work.
Also in your own project you have to include jQuery with eg:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
inside the head part of the html page.
You're trying to use jQuery syntax but haven't loaded jQuery in the Frameworks & Extensions sidebar. Select jQuery 1.9.1 and your code works just fine.
See this, this is your correct answer.
Fiddle here
I have a fairly novice understanding of CSS and HTML, and I'm trying to do something that I think should be relatively simple (in a custom tumblr theme I'm creating), but I can't find a straightforward answer. I have a feeling there might be a super easy way to do what I want in JavaScript.
I'd like to display a DIV only on the main index page (i.e. homepage) of the tumblr blog. It seems the documentation tumblr provides allows you to do this to some extent (through the {Block:IndexPage} variable), but the problem is the code within this element displays on all index pages (i.e. instead of just showing up at the root level on /page/1, it will show up on subsequent "index" pages like /page/2, etc.
Here's the code I have, which successfully does not show the div on permalink pages:
{block:IndexPage}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:IndexPage}
Any ideas? Any help is much appreciated!
This will work:
{block:IndexPage}
<div id="index"
{block:SearchPage}style="display: none;"{/block:SearchPage}
{block:TagPage}style="display: none;"{/block:TagPage}>
This is displayed only on the index page.
</div>
{/block:IndexPage}
More info: http://ejdraper.com/post/280968117/advanced-tumblr-customization
I was was looking to show code on post pages, but not on the index, search, etc page (i.e. pages with multiple posts. Thanks to the above, I figured out how to do it and wanted to share in case it helps somebody else.
<div id="splashbox" style="display:none">
This is the content I wanted to show on the post pages only.
</div>
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (self.location.href.indexOf("post") > -1 ) {
document.getElementById('splashbox').style.display='block';
}
}
</script>
You can also do it just with CSS.
#box{
display:none;
}
.page1 #box{
display:block;
}
<body class="page{CurrentPage}">
<div id="box">
Only displayed in first page.
</div>
</body>
display:none will hide it but thats, a hidden element can still mess with your layout.
We could use the comment code* to turn the div into a comment that wont mess with anything.
*<!-- comment -->
ex.
{block:IndexPage}
{block:SearchPage}<!--{/block:SearchPage}
{block:TagPage}<!--{/block:TagPage}
<div style="width:400px; heigth:200px">
blah blah
</div>
{block:SearchPage}-->{/block:SearchPage}
{block:TagPage}-->{/block:TagPage}
{/block:IndexPage}
The {block:IndexPage} block, as you have discovered, is for all index pages. To target only the first page you can use {block:Post1} inline or {CurrentPage} in script. {block:Post1} will display only on the page with the first post, which achieves what you want. The <div> can then be styled to put it wherever you want.
{block:Post1}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:Post1}
Or:
<script>
if( {CurrentPage} == 1 ) {
//display div
};
</script>
I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:
<div id="splashbox" class="mid2" style="display:none">
Followed by this script:
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (location.href == 'http://site.tumblr.com/' || location.href == 'http://site.tumblr.com') {
//alert('location match, show the block');
document.getElementById('splashbox').style.display='block';
}
}
</script>
This is solved by using div:not() operator.
The HTML Markup will be
{block:IndexPage}
<div id="banner">
<div class="banner_{CurrentPage}">
This Content will appear in only on home page
</div>
</div>
{/block:IndexPage}
Now add this CSS to
#banner div:not(.banner_1)
{
display:none;
}
{block:SearchPage}
#banner
{
display:none;
}
{/block:SearchPage}
{block:TagPage}
#banner
{
display:none;
}
{/block:TagPage}
The background: {CurrentPage} is a Tumblr theme variable which returns the page number of index pages (like 1, 2, 3, ...). Thus the home of any Tumblr blog is page number "1". Now I have defined the class of a div with this page number concatenated with a string "banner_" (Class can not be numeric. WTF why?) - making the class name "banner_1" on homepage. Next, in CSS, I have added display:none property to :not selector of that banner_1 class div. Thus excluding div with banner_1 class, all other div in under #banner div will disappear. Additionally, div with id #banner is hidden in search and tag pages.
Note: <div id="#banner" > is required. Without this, :not will hide all divs in the html.
Warning: IE users (is there anyone left?) need to change their habit. This is only supported in FF, Chrome, Safari and Opera.
I have implemented this in http://theteazone.tumblr.com/ The Big Banner (Tea is a culture) is absent in http://theteazone.tumblr.com/page/2
{block:IndexPage}
<script>
if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>
<div id="banners">
blablabla
</div> -->
{/block:IndexPage}
Alternatively, you can use this tag: {block:HomePage}.
This block renders, as its name implies, on the home page only (ie not on search pages, tag pages etc).
References:
https://www.tumblr.com/docs/fr/custom_themes
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="js/jquery.localscroll.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/script.js"></script>
script.js:
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});
html:
<div id="container">
<div id="menu">
<nav>
<ul>
<li>HOME</li>
<li>GIGS</li>
<li>TOP10</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="content"><!-- content -->
<div id="home">home</div>
<div id="gigs">gigs</div>
<div id="top10">top10</div>
<div id="contact">contact</div>
</div><!-- end of content -->
i don't understand what is wrong....help me! thnx
The problem is partially in your HTML formatting, and there might be some CSS errors on your side as well (can't tell from here.)
First of all, it's a bad idea to use an html element like <nav>, (i have no idea what it is, this is the first time i've ever seen it and it might cause problems with jQuery)
Second, your content div must have a fixed size, and overflow:scroll as CSS markup.
To see a working example, check out This JsFiddle i made for you
I remember using this plugin at some point and I think you need to specify a target
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});
Keep your menu wrapper as is and change the js conde to:
$(document).ready(function()
{
$('#menu').localScroll({duration:800});
}
);
And I don't think you need the content ID in content wrapper. That might help.
I had exactly the same problem.
Chrome was driving me nuts in why it was not working, but the funny thing was is that I've used this plugin before and it worked in all browsers!!!
So I looked at every single bit of HTML, CSS, JS, to try and figure out what was different.
See below my anchor.
<a class="anchor" name="myanchor"></a>
My CSS on the class 'anchor' was blank. As soon as I added CSS 'position: relative' to the anchor element, Bingo! it worked in Chrome.
Hope this helps someone!
This worked for me: I was including the file twice.
In our header:
<script type="text/javascript" src="/js/lib/jquery.scrollTo-min.js"></script>
And in our footer:
<script type="text/javascript" src="/scripts/jquery.scrollTo-1.4.2-min.js"></script>
Removing the second include solved the problem.
This happened due to merging of a new website design onto our existing one.
I've just wrote a blog post about localscroll at chrome: http://lukaszkups.pl/blog/localscroll-chrome-problem/
You should use:
$("html,body").localScroll({duration:800});
Duration is optional of course, but at least set html/body as a target ;)