jQuery tools seems to have support for this built into the Tabs object, but not scrollable.
I want to be able to link to a specific slide on the following scrollable:
http://jsfiddle.net/cutcopypaste/5UWsr/
I'm using
if (location.hash)
{
$('#' + location.hash.substring(1)).click();
}
but it doesn't seem to be doing anything. It picks up the hashtag fine, but the click event is either not firing or not firing on the correct element.
Could you help me with how to mimic a click on an element to navigate to the correct slide? or some other way of getting this to work?
I am worried I'll get weird scrolling down the page to the anchor name, but will worry about that only if it does actually happen.
Assuming you want to deeplink so that scrollable will scroll to a certain slide based on GET URL? here's what I do:
scrollapi = $("#scrollableID").data("scrollable");
deeplink = window.location.search.substring(1)
if (deeplink) {
scrollapi.seekTo(deeplink);
}
Add the GET string is just the number of the slide you want to link to. (starts at 0)
Related
my goal is to hide the content of my homepage when someone visits. onClick to begin button the content should be shown. Content should stay open when user goes to other page and comes back to homepage. But it will be hidden when user closes the window and opens up the homepage again. To achieve this goal I have put the following code but it keeps the content open even when user closes and opens the window. So please help me out.
if (! localStorage.noFirstVisit) {
// hide the element
$("#content").hide();
// check this flag for escaping this if block next time
localStorage.noFirstVisit = "1";
}
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
$(".roll-button").click(function(){
$("#content").show();
});
I would highly appreciate if you check website, suggest me fix or show me proper way to achieve this goal. url:iamicongroup.com
You can totally use sessionStorage to detect whether it is new tab(window) or not.
When you first visit this page, set sessionStorage.noFirstVisit = "1";.
After you go to another page and back, sessionStorage.noFirstVisit is still "1".
But when you close the tab or browser and open the page newly again, sessionStorage.noFirstVisit will be undefined.
Documentation is here
The documentation also provide the difference between sessionStorage and localStorage.
I would suggest reading this: Detect Close windows event by Jquery
It goes over window unloading (beforeunload), which I believe is what you're after. You can set/unset your localstorage values there based on certain criteria being met; for example:
$(window).on("beforeunload", function() {
if(localStorage.noFirstVisit = "1" {
// do something
localStorage.noFirstVisit = "[someValue]"
}
else {
// do something
localStorage.noFirstVisit = "1"
}
})
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
how about adding something like 'ng-cloak' in angular, to avoid the undesirable flicker effect caused by show/hide.
when clicking the roll-button, it prevents the divs from showing unfinished..
Ok, I have a few issues... I'm building my site with bootstrap/jquery. I'm using bootstrap nav and all nav links are hash links to different containers on the same page.
Issue #1
When using the method below to 'hijack' the link I lose the URL address thus look the ability for people to grab the link and share or link to it later.
Issue #2
There are a few other pages with content that aren't on the homepage. So obviously when users click on the link /somepage/#photography doesn't work. Is the only solution here to not use relative links?
<nav>
Photography
</nav>
// smooth scroll from navigation
$('nav a').click(function(evt){
evt.preventDefault();
var $section = $($(this).attr('href'));
scrollToObject($section);
});
Issue 1: the reason for losing the hash at the end of the URL is because the call to evt.preventDefault() is preventing the hash from being added.
I am not 100% sure on the inner-workings of the scroll effect in scrollToObject(), but if you can provide a callback function when the scrolling is complete you could then add location.assign( evt.target.hash ); which will add the hash to the URL (and it will show up in the user's history.) Of course, you can get the hash value from the anchor object, event, etc.
You can read about the location interface in js on MDN here: https://developer.mozilla.org/en-US/docs/Web/API/Location
Issue 2: You could actually accomplish this once again using location.assign(). Once again, without seeing all of your code, you can create a conditional in a callback and then send the user back to the page with the scrolling anchors: location.assign( location.origin + '/' + evt.target.hash ).
I need help with a jQuery function that will allow me to use hashtags to scroll to an anchor point on a .load() page.
Basically someone clicks on a homepage link and it opens up a model window that they use to navigate the remainder of the website. This window then uses the same code to open up any other links on the site. I know the format of these links is not optimal, but it's what I am required to work with.
I have the following code that is displayed in a model window.
<div id="pop-top-menu">
<p class="p_text">
Go Back |
View by Resorts |
View our Private Homes |
View our Properties with Discount Coupons</p>
</div>
When someone clicks on one of those links, it will then go though this code:
function pop(id) {
$("#body-cover").fadeIn(1000);
$("#slide-content").load(id).slideDown(1000);
$("#slide-content-close").delay(2000).fadeIn(1000);
}
So I need to have the visitor click on properties.php#property_id and it load the page properties.php and THEN navigate to the anchor tag. Not all links will have anchors, but many will.
Please note, this is not anchor-based navigation. This is loading a link and THEN navigating to the anchor provided (if it exists).
Untested, but when I understood your question correctly you could modify your pop function like this:
function pop(id) {
// Expression to test if id has a hashtag
var hasHash = /(#([^ ]*)/,
$hashID;
$("#body-cover").fadeIn(1000);
$("#slide-content").load(id).slideDown(1000);
$("#slide-content-close").delay(2000).fadeIn(1000);
if(hasHash.test(id)!== false) {
// hasfound - grep it, and make a jQuery Object
$hashID = $('#' + id.split('#')[1]);
if($hashID.length) {
// if it is found, scroll to this element with an animation
// in case you just want a jump, simply set scrollTop
// and remove the animate method
$('html, body').animate({
scrollTop: $hashID.offset().top
}, 2000);
}
}
}
http://tympanus.net/Development/ContentRotator/example2.html
Currently this Content Slider lets you scroll every 4 thumbnails (a set) when you click on the arrows. How can I make it so that clicking the arrows moves onto the next thumbnail instead?
Also, it is currently on AUTOPLAY, but once you click on a thumbnail, it stops. How do I make it continue to autoplay even after being interrupted by a click?
This is the tutorial page: http://tympanus.net/codrops/2011/07/29/content-rotator/
The script for the slider can be found here:
http://tympanus.net/Development/ContentRotator/js/jquery.crotator.js
It's not a well written plugin and unfortunately the script itself doesn't allow for customizations (i.e. you cannot pass in a list of options). There isn't an option to prevent it stopping on interaction. To achieve what you want you'll need to edit the code.
I had a look at the code and the slider will continue to work so long as the variable config.slideshow = true. However, there are a number of event bindings that have code to unconditionally set the value to false. E.g.
$navNext.bind('click.crotator', function(e) {
...
config.slideshow = false;
...
}
You could remove the code where the value is set to false and that would solve your problem. However, since you're going to touch the code it's better to allow the plugin to accept options. You could make it allow an option like 'stopOnInteraction' where it basically does the following line in the event handlers:
if (config.stopOnInteraction) {
config.slideshow = false;
}
I hope some of you better than me at coding can help.
I have a simple webpage (www.mypage.com). It has 5 links
Link 1 (www.mypage.com/link1.html)
Link 2 (www.mypage.com/link2.html)
Link 3 (www.mypage.com/link3.html)
Link 4 (www.mypage.com/link4.html)
Link 5 (www.mypage.com/link5.html)
Now from the main homepage, clicking on the link opens up a popup window using an iframe to display the page they clicked.
Now what I want to do is that when people click the link via the mainpage and hence get a popup/iframe, that on that page eg (www.mypage.com/link1.html) I want to hide some elements. The elements are things link Menu and Banner.
Now if a person enters one of the links manually eg typing www.mypage.com/link1.html directly into their browser, then I want the Banner and Banner to show.
Is there anyway I can do this?
Is there some javascript that can run that if it detects it's an iframe that it can do a display:none on the elements I want to hide?
Many thanks in advance.
This is how i would do it :
in the link pages (www.mypage.com/link1.html) i would have a script to verify if the hash of the url has a certain value.If it does, then hide the banners;else show the banners normally.
So when you open the page in an iframe, be sure to set the src to "www.mypage.com/link1.html#banner_off" and not to the simple "www.mypage.com/link1.html".
This way, when a user types in the browser the link address (without the hash value), your ads will be shown.
here is an example of how the script in the link pages should look like:
function manageBanners(){
if(document.location.hash == "banner_off")//hide banners
{
//code to hide banners here
var banners = document.getElementsByClassName('banner');
for(var i in banners)
banners[i].style.display = 'none';
}
//else do not alter the banners visibility
}
window.onload = manageBanners;
Of course you can use in the same way the php-query like sintax : url?banner=false and check for the parameters in the url.
Hope this helps!
The best way I can think of to detect that a page is in an iFrame is to compare the URL of the page with the URL in the browser window. If they're different, it must be in a frame.
if (top.location != location) {
// hide menu and banner
}