Like the link : http://getbootstrap.com/css/#type
Here when you open this link, Window will automatically scroll to the type id.
How did they do it?
I mean, how to scroll to a specific id on the same page using Header like some.com/post/#id
Please comment below if you need more clarification.
EDIT 2 :
Okay home.php#26 this is working..
But this is working only wen the page is already loaded and then i change the header.. i want it to work when page is loaded First time with this url only.
Like when u open http://getbootstrap.com/css/#type It automatically takes you to id "type". But when i load mywebsite/home.php?#26 it does nothing.
If you want to use headers, first include in the target GET variable to id where you want to scroll to.
Eg - /home.php?target=12 (12 is the id here)
Then use the following script:
$(window).load(function(){
$('html,body').animate({ scrollTop: $('#<?php echo $_GET['target']; ?>').offset().top - 100 }, 'slow');
});
Here you go with Your scroll plus cool jQuery effect. :)
you just need to provide an id at the end of the url .
like yoursite.com/page/#yourid.
somewhere in your site <div id="yourid"></div>.
And you are done, this doesn't animates the scrolling, if you want animated scrolling use , jquery animate function.
Related
I have a single page site on which I show a few lines of the 2 latest news on the start page. When you click the read more link, the page should scroll to the news section and there you should read the full news. The scroll part/show full news are ok but I have no idea how to put them together. This URL format is not working www.example.com?id=1#news. It either does not scroll or it just jumps to the news section. TX
EDIT: In the end I am using the data-elemid to pass the newsId variable to an ajax call. Everything works as it should now.
Try something like this:
$(function(){
var hash = window.location.hash;
if(hash != "") scrollTo(hash);
});
This will check if the current URL has a hash, if it does, then call the scrollTo() method (you should replace this with your own scroll method).
I am writing an application that I want to make more user friendly by removing the amount of clicks needed to navigate.
At the moment pages are loaded like so:
<a class='pageloader' name='page1.html'>Page 1</a>
<script>
$('.pageloader').click(function(){
// Load the page that the user clicked on by taking the name property and appending it to includes/
$('.content').load("pages/" + this.name);
});
</script>
Basicly this takes the name of the clicked link and replaces the content div's content with whatever is inside the file that matches the name property.
Now my only problem is that I can't redirect people to pages using HTML because the only page that has proper styling is index.php.
Obviously I am now redirecting people to index.php after an action is finished, but I would like to redirect them to a specific page.
I've thought about calling
$('.content').load('pages/edit-plein.php');
(This code is inside a .php script that writes to a file)
But that only gives me an error since it cannot find the .content div.
Would anyone know a good method to redirect a user to the page I want?
As far as i understand you want to make shure the right content gets loaded (inside that div) when you share the link to a specific subpage on your site, but can only share a link of your index.php because of its styling.
I would suggest you add a variable to your URL, i.e. like
index.php?page=edit-plein
then get that var with PHP and create a JS call to your pageloader, like this:
<?php
if ( $_GET['page'] != '' ) {
echo '<script>$(".content").load("pages/'. $_GET['page'] .'");</script>';
}
?>
This is not a good way for links:
<a class='pageloader' name='page1.html'>Page 1</a>
Maybe you can try this:
Page 1
Page 2
And JS must be like this:
$('.pageloader').click(function(){
$('.content').load("pages/" + $(this).attr('id') + ".html");
});
I hope this solves your problem.
i wanna apply a affect where my links gets a new color each time i press them... This i believe can be done with a jquery function, however my link are not linked to anything just som PHP so I cant make it work but here is what i wanna do:
Make this: http://jsfiddle.net/wD6C6/
Like this: http://jsfiddle.net/cnMdb/31/
Each time i press the links, they change color to for example blue.
Hope u guys can help me with this tricky one because my links are to some php and not just some # :)
You should add an onclick event to the links, to call a javascript function to change the background color of the link, and a target="_blank", to open the link in a new tab, so that a user can see the changed background color of the clicked link.
Or you can call the php pages using Ajax (I guess you meant this by saying "my links are to some php and not just some #"), and load the responseText to a part of the current page, so that the difference you make in the general design can be seen.
But if it is not the answer you seek for, then your question really needs some more explanation.
Not sure that I've understood your problem but...
Based on:
<div id="foo">
Click
Click
</div>
And whether the links point to php or are created by php should make do difference, you can do:
$(function(){
$("#foo a").click(function(){
var r=Math.floor(Math.random()*256-1);
var g=Math.floor(Math.random()*256-1);
var b=Math.floor(Math.random()*256-1);
rgb = "rgb(" + [r,b,g].toString() + ")";
$(this).css("color", rgb);
});
});
Here's a fiddleto play with.
My blog has its posts links. What I need is code that will do this: when a user clicks on a post link, a parameter will be added to the link which I'll use with a get function on the other page.
This is my link - link which is visible and indexed by google:
my post link
When a user clicks on it, I need a way to add ?car=type to the link, http://www.mysite.com/post1/?car=type.
I'd like to do this with jQuery.
P.S.
I can't just add my car variable to the links in normal html, becouse Google will index them badly, the variables change every day and I'd get pages not found all over the serps.
Any idee?
Ty!
Well...
$(document).ready(function() {
$("a").click(function() {
this.href += "?car=type";
});
});
Live test case: http://jsfiddle.net/y6PrF/
If you mark the desingated links in a way such as a class (say addType):
<a href="http://www.mysite.com/post1/" class="addType" >my post link</a>
you can do something like this on document load, no need to wait for click to do it:
$(function() {
$("a.addType").attr("href",function() {return this + "?car=type";});
});
Here's a jsfiddle example: http://jsfiddle.net/nbKPu/
Basically, I want the same effect as the oldschool html 'frameset' I think.
Take a look at this page please:
http://onomadesign.com/wordpress/identity-design/alteon-a-boeing-company/
If a user selects a project from industry -> transportation for example, I would like that the right scrollmenu keeps its initial state when the new project page comes up. So they won't get lost and have to click again to be in the same submenu section.
So, the right thumbnail navigation should stay in the same way, I don't want it to reload.
Do I have to do it with frames or iframes? Or can I make some kind of jQuery call to 'not reload' that div? Maybe PHP? I'm sorry, I am not a programmer from origin.
Update:
Guys, I managed to put the whole thumbnail navigation code into a seperate php file, called sidebar.php. Now this gets called in my single.php (Wordpress) by <?php get_sidebar(); ?>.
Should it now be easier to make this sidebar.php NOT refresh on page reload? I've been looking at cookies, php sessions, iframes.. but I can't get it to work.
Any more help would be greatly appreciated!
Facebook kinda does this without frames for optimization's sake. They take every single link and, if supported, using AJAX to load the page content without reloading the layout.
Obviously, this sort of thing may require significant restructuring of the internals of your app. Another option is to simply store the menu's state as a cookie on link click (see the jQuery Cookie plugin) and, on every reload, either have Javascript look at the cookie and dynamically restore the menu to its correct state, or use your internal PHP to read the cookie and decide what menu to display.
But if you get really desperate, you may end up falling back on frames. Sometimes that can be okay - but try everything else first :)
You also can detect what menu item was activated (you got the page request due to clicking on the corresponding link) and use this information to restore/select this menu item.
At least that is what I do and... No cookies or AJAX required!
You can use a technique known as "AHAH" Asynchronous HTML and HTTP. Essentially you're doing a jQuery
$.post("whatever.html",function(data) {
$("contentdivelement").html(data);
}
You can wrap this in a function like:
updateContent(sPage) {
$.post(sPage,function(data) {
$("contentdivelement").html(data);
}
}
This will load the content from your "frame" page into the div without reloading the page.
You can also bind to each of the navigation links and use their HREF as your path to load in your content div such as:
$(".menuLink").click(function() {
var menuLink = $(this).attr('href');
updateContent(menuLink);
/* prevents the browser from taking the parent to that link */
return false;
});
ADDITION:
Your menu may look like this:
<ul class="myMenu">
<li>Frame 1</li>
<li>Frame 2</li>
</ul>
Also,
If you want it to remember the page you're on you can use cookies or #anchors. There are many ways to add "tab" or "menu" anchors but one way would just be to use a jQuery plugin.
The most COMMON and TRENDY way to do it is to use #anchors. Your browser address bar ass #frame1 to the end so when the page is refreshed or reloaded it will load up "frame1" automatically with some additional code.
You can even called the anchor #/frame1.html and read the anchor in
$(document).ready(function() {
/* you'll need to either use a plugin or parse out the anchor from your current browser address bar */
updateContent(anchorContentVar);
});
Instead of updating your content using click-handlers I suggest a slightly different approach. Just replace your hyperlinks with this kind of link:
#info_page
Now set up a simple interval that reads out the current URL and updates the DIV accordingly:
__LOC = document.location.href;
setInterval(function(){
if (__LOC!=document.location.href) __LOC=document.location.href;
var fetchURL = __LOC.split("#")[1];
$.get( "/getcontent/"+fetchURL, function(d){ $("#mydiv").html( d ); } )
} 1000);
This allows visitors to use bookmarks as well.