I'm building a site where there will be four tiles on the front page. When a tile is selected, I want the content to pop up in like a window that will be a bit transparent so you can see the main page behind it.
I've successfully coded just that, getting the link to bring up another div that is otherwise hidden and I've even gotten it to load another html document. I accomplished this with XMLHttpRequest();. My question is, is there a more efficient way to do this? I know I've done something similar in PHP before in school and when I google, I do see that being a way to do it, but I'm also seeing jQuery and AJAX being mentioned. My overall goal is to get it to where if I want to update the CSS of the screens, that I only have to do that for the main page, and it affects the content pop-ups.
I hope I explained this well enough. Thank you for any advice!
It's very simple to do in jQuery:
$("#yourDivsId").load("/UrlOfYourIntendedMarkupDelivery?anyarguments=true");
Related
I want to load more images in my website when I reach the bottom of my page. I'm using php and postgresql as my database.
For this post I simply load some text instead of image. I can write the code for it's equivalent.
So currently, I'm using a button at the bottom of my page, which when pressed re-loads the page and gives you more images(I'm displaying 50 images at a time).
But there are 2 problems with it, one being that the user will have to press the button again and again while I want it to happen automatically.
And the second one being that when new images are loaded, the previous ones are gone. I don't want to happen. For eg., if currently 1-50 images are present, my page later changes it to 51-100 while I want it to have all 1-100. I'm unable to solve this.
Please help. Thanks!
What you are looking for is commonly referred to as "infinite scroll pagination", while what you're asking for is techniclly possible using only PHP it would be a terrible user experience, as each reload would take the user to the top, and they would constantly have to continuously scroll further and further just to reach the location they were previously at.
Alternatively, handle this with JavaScript, an example: https://infinite-scroll.com/demo/full-page.
Doing simple Google searches reveals a plethora of options for JavaScript and JQuery plugins to achieve this.
An alternative, without the need for a plugin you can implement the answer to this:infinite-scroll jquery plugin
Simply call your PHP code in the form of an AJAX request when the bottom of the page is reached and append your new results. (this could be easily achieved with vanilla javascript as well).
Hope this helps.
I have been looking for a way to change a main image without using javascript AND not refreshing the page. By reading the title I am sure you will be thinking 'this chap is an idiot an minimum of refreshing the page is required, however, I have seen on ASOS e.g. http://www.asos.com/ASOS/ASOS-2-In-1-Fishtail-Parka/Prod/pgeproduct.aspx?iid=3132737&cid=12931&sh=0&pge=0&pgesize=36&sort=-1&clr=Black#ctl00_ContentMainPage_mainImage2
they have managed to achieve this by what appears to be to load the main images as well as the thumbnail, then hide the unused main images and then once it is clicked to show the main image.
I have no idea how they are doing this as I am definitely not an expert but I hope someone can help and tell me how I can achieve the same functionality. I guess it is some CSS stuff but not a clue really.
A JSFiddle with explanation would be the worlds most ideal answer
Thanks
I want to achieve something like Facebook, where the top bar stays there and only the content underneath it changes for different pages. At the same time the URL at the top also changes, for example /messages or /events.
I'm not completely sure if this is how Facebook works but I'm trying to achieve something like this... Right now I can't figure out how this could be done...
Does anyone know how this could be achieved or if there is a name for it?
You could do this with a fixed header that is on all of your current pages, so that whenever a new page loads it appears the header is still there, or you could do the more complex way of putting all your pages in separate divs on one page, and hiding/showing the appropriate divs when a link is clicked. I'd recommend the first way personally, but those are some options.
I'm sure there are other ways to go about this.
If that isn't what you want then I apologize.
Edit: Also, my first suggestion will load a whole new page, so if you want the seamless transition effect then the second option will be the better route to go
Templates perhaps? You can't change urls without navigating to a different page as far as I know. If you want consistent elements on the page with varying content that basically is the function of templates.
If you're looking for dynamic elements to show up on the page then you should look into AJAX and DOM manipulation. jQuery is the defacto library to help with both of those. Take a look at http://api.jquery.com/ and maybe search for a template engine. Most web frameworks include a template system to create consistent styles and allow code reuse.
You can use #anchors, that won't reload the page. For newer browsers, you can use https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history to update the url without reloading the page
I want to make a sort of repeating slideshow banner for my website, but i need some help on how to do it. The best example of what i want is on the play.com website, they have a banner that has 5 different slides, the site scrolls between them after X amount of time but the user can also click on one of the numbered buttons at the bottom of the banner to skip.
I'm thinking of doing this using HTML, CSS, JavaScript, AJAX and PHP. I have an Ajax script set up already linking to a php page that will at somepoint check through a database to get its content. But i want to output everything using lists lu and li.
So does anyone know of any tutorials or something i could use to get something like on play.com? play.com is more or less and exact match to what i want.
Thanks for the help.
You can use jQuery in combination with slideshow plugins. You don't have to do much by yourself. A plugin which does what you want can be found here:
http://slidesjs.com
You can also search Google for "jquery slideshow". This should return lots of pages with plugins.
I use http://jquery.malsup.com/cycle/ as it has a very basic fade but also lots of different animations if needed.
Unless you have a good reason for it, there's no need for you to create the slider yourself, there are tons of options already made (and tested).
I often use this two:
http://nivo.dev7studios.com/demos/
http://jquerytools.org/demos/scrollable/index.html
here is a really simple one that loops through any number of <img> elements placed inside a <div class="slideshow"> wrapper and it only uses a few lines of jQuery and css...
http://jsfiddle.net/DaveAlger/eNxuJ/1/
hope this helps someone else
I am hoping for some advice, imagine if you will will you are on a website and you are greeted solely with navigation menu, on click the navigation menu that is situated within the left hand side of the screen you can add various content to the right side of the screen that is loaded in individual ‘divs’ then collapsed in accordions(this effectively makes a one page site(Yes I am aware of poor SEO, Accesibility and Usability). Now this raises some questions from me.
1) What would be the best way to load in the data for each of these ‘modules’ as they are clicked. How would I load the codeigniter views in with leaving the index page?
2)The user can also remove ‘modules’ how could this be achieved without leaving the page?
3)If there are 3 pages that are loaded in from 3 different views all in an accordion how can i make it so only one accordion can be open?
4)If the ‘module’ has further links within it, it should load in another view to left of it, how could I control this?
I know I am asking alot of advice but I have never seen anything on the web that is like this and would really appreciate some feedback on the best way to approach this.
This really is a question on jQuery, and jQuery's Ajax methods. You're not asking about anything too difficult here. Just a menu that makes asynchronous calls to the server for content, and loads the respose HTML into a particular DIV.
$("a.homePage").click(function(){
showLoadingAnimation(); // Indicate ajax-loading
$("div.Container").load("/home", {}, function(){
hideLoadingAnimation(); // Hide indicator after content is loaded
});
});
This would load in your home view. Just be sure that it doesn't bring a template along with it. Once you get started on the actual development, return here to ask more specific questions to get quicker and more thorough responses.