I have a page that scrolls horizontally left to right. As the user completes the form, the page is scrolled to the left to show the next part of the form. This is no problem with jQuery. The problem is that I want to have the option to have the parent page jump to a specific subpage of the form. If my code were vertical, this could be easily done with hashtags. The only other way that I can think of is to pass a GET variable in the querystring and then echo the GET variable to a javascript variable and move the page that way. Is there a better way?
var subpage = '<?php echo $_GET['subpage'] ?>';
if (subpage == 'yes') {
$('#page_wrapper').css('left', '-2000px');
}
You can still do it with hashtags:
var subpage = window.location.hash;
if (subpage == '#yes') {
$('#page_wrapper').css('left', '-2000px');
}
Also you probably want to use scrollLeft to set the horizontal scroll of the page, if you do it the way you're doing it there you'll run some of the page outside of the viewport.
$(document.body).scrollLeft(2000);
You can jQuery plugin to move to any part of the webpage using scrollTo. Hope it will work for you. http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Related
To be clear - Ive already checked other Questions about refreshing div and the ideas I found were not exactly what I look for.
My site is made of plenty pages with the same header and footer (top, bottom, menu on both sides). I use smarty templates, and the Whole action of every page happens in one <div id="content">.
My users use to refresh most of those pages many times to do an action they've already done once again. With refreshing browser loads again header, footer, viewed page etc. I would like to bring them the button (instead of F5) which will refresh just a current content page (e.g. account.php) without refreshing whole site.
One of plenty structure:
<?php
$title = 'OneOfPlenty';
require_once("includes/head.php");
{
Whole action
}
require_once("includes/foot.php");
?>
header.tpl ends with <div id="content"> then comes
onofplenty.tpl and then in
footer.tpl I got </div> (close the content)
Here comes the question: Is it even possible? Am I able to create such a flexible button which will recognize which page is being displayed and will "know" to refresh just the content of this page?
Any ideas and help will be aprreciated.
Thank you
TTed
You could do an Ajax call with jQuery to get the output html of the tpl file of the page.
You could use an Ajax call, e.g. by using the jQuery get() function, e.g. like this
$.get("includes/account.php", function(data) {
$("#content").html(data);
alert("Load was performed.");
});
If you saved some kind of variable, either to session or to a data-content on your div. Just so you know which page you are on. Say if you are on account.php you set $('#content').attr("data-content", "account"). Then if you press the refresh button you could use an ajax get on $('#content').attr("data-content") + 'php' to re-import the data. Could be done with a SESSION variable as well.
On my website an user is able to fill in an url. When he fills in the url, he gets all the images src's from that url. I push these src's to an array in php:
array_push($goodfiles,$pic);
Now the user will be able to choose on of the pictures (with a next or prev button) and then save it to the database. The picture that's saved is based on the id of the image in the array. So $goodfiles['0'] means id = "0" and so on.
I want the swapping of the images to work with ajax, so that the pages doesn't have to refresh all the time when clicking the next or previous button. And then when I save the form, I want to know the id of the current image, so that I can save it to the database.
How do I realize this with Ajax (jquery)?
Edit:
This is how I do it right now:
$current_id = $_GET['id'];
if(empty($_GET['id']) || !empty($empty)) { $current_id = 0; }
$prev_id = $_GET['id'] - 1;
if($prev_id < 0){ $prev_id = 0;}
$next_id = $_GET['id'] + 1;
if($next_id > $_SESSION['count']-1 && $_SESSION['count'] != 'empty') { $next_id = $_SESSION['count']-1;}
This is the code for the pagination
And this is the pagination:
<div id="url_pic">
<img src="<?=$_SESSION['pictures'][$current_id]?>" class="img_load"><br>
<? if($_SESSION['count'] > 1) { ?><center><img src="img/add/left.png"> <img src="img/add/right.png"></center> <? } ?>
</div>
So right now my solution doesn't contain any javascript, but it's all php coded. And the page refreshes everytime you want to see the next picture. I want to solve this in ajax, so that you can paginate through the images without a refresh. The way I want it is like this link:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
But except for the text, I want to paginate through images.
You probably don't need to use AJAX for this. Simply return a html file containing a JavaScript array, which contains all those image URLs and do the other stuff using JavaScript.
Get back to StackOverflow in case you've a more precise question and hopefully some code, which we can help on ;)
Load a script at the bottom of your php page the user side of the PHP where all your HTML is, above the closing body tag thats something loosely similar to this
<script type="text/javascript">
var myArray = <?php echo json_encode($myPHParray); ?>
</script>
this way when your page loads out it renders with a dynamic javascript json object as a variable that you can work with client side, this removes the need for an AJAX request all together unless your doing stuff with the data your playing with. From first glance Im guessing not really per say. But yea, at the very least its one less transaction to be made when the page is loading.
edit just noticed someone said similar while I was typing out.. Lars.. so I guess this is a follow up to his answer :-D
So I'm experiencing problem - I got a function, when someone clicks a menu, it will show a div tag. See here -
$("a#cat").click(function() {
$("div#categoryBox").show();
return false;
});
So far everything works great, the div content shows up excellent, but the problem is that inside div content there are buttons (a tags), delete and edit, when I click one of these buttons, the div tag hides. The button links are -
<a href="?action=edit&id=<?php echo $id; ?>"> and <a href="?action=delete&id=<?php echo $id; ?>">
If I press one of these links, the div content automatically hides, and I need to press again the a button with id #cat. Is there any way to make it stay, unless I press different menu link or refresh page?
If you need any additional information, please ask.
May be the page is reloaded when you click on edit/delete links, so you think the div gets hidden. If you are doing any client side implementation on edit and delete click then you should make sure to prevent the default behavior or those links. Try this.
$('#categoryBox a').click(function(e){
e.preventDefault();
});
There are several ways to do this. Perhaps the easiest is to re-show the div when the page loads if certain conditions are met.
If you want to display the div every time the url is ?action=edit or ?action=delete, use this:
$(function () {
if (/\baction=(edit|delete)\b/.test(location.search)) {
$("div#categoryBox").show();
}
});
Or, you could append a hash parameter when you want to show the div:
edit
delete
$(function () {
if (location.hash === "#showCategoryBox") {
$("div#categoryBox").show();
}
});
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.