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).
Related
ORIGINAL POST: Not sure why I am having such a hard time grasping this but I am creating a page that executes a query to list a set of records per a user. I am wanting to create a div that shows the details of a select record from the list. I am attempting to load that record with the following:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
$("#form").load("tm-reserves-form-test.php?ContactID"+$ContactID);
});
});
Initial form loads but I can not get my .click function to work using the URL parameters.
How can I pass the url parameter from my current query into a div that loads an external page and executes a second query based on that url paramenter (primary id)?
Thanks in advanced for helping me out!
EDIT POST: Found solution, but another issue has arisen.
So I took a crash course this weekend on ajax and I found a working solution here:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
So with this example, when the page loads the div form is loaded with a default page. With a click function on the label #record the div #form is than loaded with a parameter of ContactID that is a string value inside of #ContactID. All that seems to work very well (even passes the parameter correctly).
The issue now is that it is only allowing me to pass the first record to my div. Any thoughts on what I need to implement next? I originally thought it was to clear the var but that didn't work either.
The original query parameters are not readily available to a running script. So $ContactID is not resolved to an actual value.
See this page on methods for extracting query parameters from the current page:
Get query string parameters with jQuery
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
This code solved my initial question, but led to an additional question.
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.
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.
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.