Using java script is it possible to change the background color of another page, ie if i say i want the background colour to be blue, i would type it into a text box on one page, and when i click the link to the page i want the background color to be blue, its blue.
If this is possible how would i go about it???
If both pages are in (i)frames or one page is in an iframe of the other it is possible using cross-frame scripting. It is also possible if one of the pages is a popup produced by the other.
If not then it is only possible by making a whole bunch of server script and using forms and automatic refreshes or AJAX, not soemthing easily explained.
No, you won't know exactly when that other page has completed loading, if you do, then you can simply get the document.body of that other page and change the background-color style (as long as the other page is not in a different domain and the user doesn't quickly close the page where the link is).
Related
I have a design Idea to implement in navigation buttons in which When the user clicks any other button the background of the current button, say "HOME" transition to the button the user clicked, when the webpage the user selected is loaded, WHILE simultaneously changing the font color of the button text.
Below is an image which will give you want I want to do. Any idea or any website you have sen this working will work. The font color is exactly what I want to transition.
Thanking you in advance.
How it should look on webpage
you will need to use ajax to implement this as it will only be possible in an SPA. An application that refreshes would defeat the use of transitions. I cant write the code for you but will be able to help you if you have a code sample u have tried
I've seen some similar questions about this around here but I didn't see anything that might be able to help me here. I am making a web site and I want each page to fade in on load and fade out when someone clicks a link. I have that down with jQuery but between the pages there is a white flash before the pages load. I tried moving around my javascript but in some cases the page didn't load correctly. I'm a bit new to this so I may need a bit of explanation on any possible solutions.
Here is the live site:
http://codyshawdesign.com
The HTML is valid in 4.01 Transitional. I've heard about something like Ajax or pagination but I am unsure how to implement those or what I would have to do to put it in my site or if it would even be the most ideal solution. Thanks for any help!
Shouldn't you only update a portion of a page, not the whole page? Now you have many full scale pages with different file names. The page address changes so the whole page is loaded. It's like refreshing the current with ctrl+r/cmd+r page and that isn't very ajaxy.
One solution would be to have a master page which contains all of the common elements between pages such as header, footer and navigation bar. On that page you have a div (or some other area) where you load information dynamically from a different file. What info is loaded could be determined with GET variables via anchor tags or ajax form buttons.
See for example this link and it's demo.
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
It's pretty basic but it demonstrates the idea not to load the whole page but only a portion of it. Add some styles and you're ready to go.
Sorry if this doesn't help. Maybe there is a way to refresh the whole page without the white flash. Easy solution would be to change the background color to white but then again, it wouldn't be very ajaxy...
With do pagination you would have to return all pages right when the the user visits your index.php and then you would use javascript to show and hide the right divs as the user clicks the links in menu, that's not good in your case, it'll make the user wait for the entire site even if he's not willing to look at all of it.
AJAX seems the right way, and u can easily implement it with jQuery load method. Just to get you started:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
);
});
This should cause all your links to replace the content of the pageContent div with the content returned by the link without flashing the screen.
I'm developing a system, which supports CSS themes. It's Ok so far, I can change the theme as desired, but the system is composed by two parts:
First is the "skeleton" of the system: it contains the menu and the options to change theme. That menu loads the contents of the second part which is composed essentially by an iframe which loads the modules called by the clicks on menu.
I can change the theme of the first part of the system using the following code:
$("link").attr("href", "css/temas/"+theme_name+".css");
The theme_name is gathered by reading the link on the menu click. The system is ok here, and no change is needed. Beyond changing the main theme, it records a cookie, which is used to read for further system theming.
So, the second part of the system also reads that cookie to apply the theme, but it doesn't change instantly as the main part does!
For example, when I click the theme icon, it instantly applies the theme without refreshing the screen, but that doesn't happens to the second part! It apply the theme, but it's shown only if I reload the iframe, and reloading, ain't cool!
I'm trying to change the iframe theme with the following code:
$("#ifr_main link").attr("href", theme_name);
Where #ifr_main is the iframe name!
Does anybody knows how can I figure that out and apply the new CSS without having to refresh the page, as I do on the menu?
You need to select the content of the iFrame first before trying to select it's link element.
$("#ifr_main").contents().find("link").attr("href", theme_name);
Side note, iFrames can be ugly :)
It is because iframe content was loaded when your page is loaded, so after it, you cannot change its looking unless you are using JQuery/ajax methods or reload.
Yo can find some questions about it
here, here and here
maybe you can reload your ifreame via ajax, read here
Finally you should watch this video for more unique way.
I have a web page where I have two iframes. I set the url (location) of the iframes in the page onload event. This is done to "delay load" the content. That is, the main page content is rendered first, then the iframe content with e.g. Like buttons, trust logos etc. are displayed. This speeds up the page rendering considerably.
However...
Clicking the back button first removes the trust logo. Then another back button click removes the Like buttons. The third click finally takes the user to the previous page.
Is there any way to avoid the URLs of the iframes to go into the browser history, while maintaining the above functionality?
Thanks!
Avoid using iFrames, if you really want to improve rendering like this, use AJAX. However there are numerous other problems if your page actually renders slow, how large is it, and how is it structured?
i saw this on a site a couple of days ago and i cant seem to find it again.
in any case, this is what was on the site:
the page opened regularly when you entered the url. upon clicking one of the links on the page, it "transitioned" to the next page (there was a color change). and the url in the address bar was changed to reflect that. eg: if the background was blue on site.com, when clicking on the about link, the background would change to green and the browser would show site.com/about. and so on.
also, if the url entered was site.com/about, the bg would be green and on cliking the home page, the site would transition from green to blue and browser would show site.com
im interested in finding out how this was done. searching on google got me the meta-refresh tag, but the ffect was much more complex and worked on all browsers.
is there any other method out there?
There are a lot of realizations. The simplest way is jQuery
You can find page transition generator right here :
http://www.designerwiz.com/mf.htm?http&&&www.designerwiz.com/generator/dhtml_page_effect_generator.htm
if you wanna do it via jQuery, here is a tutorial about it :
http://weston.ruter.net/projects/jquery-css-transitions/
and sample :
http://weston.ruter.net/projects/jquery-css-transitions/code/example.html