When I use Google Translate, the top portion always stays even when I click on a link to go to another page. How is that possible? What HTML can make this happen?
I am not sure exactly what part you are talking about however websites use several tricks to achieve page switching without reloading.
iframes can be used to include other pages within your page, this can in some cases give the effect you are looking for.
Many modern pages will use ajax, this will load some data via an asynchronous javascript call which is then used to populate part of a page, this means the whole page does not need to be refreshed.
Related
Hay, I have problem with google cache. I want the homepage of my site in google cache will be shown correct and not broken, like the source. this is the source:
https://www.fnx.co.il.
the cahed page is here.
I googled it and I found answers to check if links are up-to-date, or to check reltive links. it is not the problem. even what is missing is font files. the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
is there way to prevent from google to add its elements to the page, or another solution that will make the cached page look good?
To start with, you have an error in your normal page that you would need to fix first:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
That means you are initialising fullPage.js multiple times and that's why scrolling down in a Macbook trackpad (or some other kinetic scrolling devices) will scroll more than one section at a time.
Make sure to fix that first.
the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
It doesn't seem to be the issue. The fullpage.js site is displayed almost correctly (besides the top margin issue) in Google cache
I would try to use the latest fullPage.js version (3.0.5) and then see if you still have the issue.
The client doesn't want the photo to be downloaded if it is right clicked on. I explained if someone wants the photo they can get it off the site but he wants to make it a bit more difficult for a novice user to download the image. Hence if you right click you will get the blank 'photo' instead of the actual photo underneath.
Use logic:
Put the image you want to protect as a background image in a <div> or other block level element
Put an <img> that is transparent over that image in the <div>. Make sure it covers the entire image/div
A quick google has thrown this up for me, hope it can help you.
4) Prevent Downloads Using Tables: 'Right clicking' images is a fast shortcut to find, copy, and/or download images. For those that have their own website it is possible to prevent this action by placing images as a background to tables. The code is fairly simple in CSS, using the "background-image:url" style:
<table style="background-image:url('image.jpg');width:Wpx;height:Hpx"><tr><td></td></tr></table>
Another method might be,
5) Javascript Right Click Disable: Another measure to prevent right clicks on images is to use Javascript. These short scripts over-ride browser right clicks. Rather than recreate a script that has been widely published in various forms over the internet, I will leave it to the reader to search google for Javascript Disable Right Click. I will however mention that Javascript is client-side, and scripts such as these can not only effect the usability of a website, but can also readily be disabled by turning Javascript off.
I took the info above from this site --- http://www.naturefocused.com/articles/image-protection.html ---
People can just printscreen the image and put it in paint if they really wanted it though im afraid :(
Thanks,
Jack.
First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/
Here's my problem:
I have a Flash object on my page.
The user can change views within the Flash. [Not directly relevant but possibly useful: when this happens, the Flash creates a JavaScript event.]
I'd like to create separate Disqus comment threads for each Flash view, and according to Disqus's customer support, this needs a unique URL (not just hash fragment) for each comment thread.
It's not possible to write to the URL (as opposed to the hash fragment) without reloading the page (except in newer Webkit browsers).
However, I'd really like to avoid reloading the page, and having to reload the whole Flash object, each time the user changes views. But I'd really like to offer unique Disqus threads on each Flash view.
Can anyone think of a smart way I can get round this?
Could I put the Flash in an iFrame and not reload it when the rest of the page reloaded... or is that impossible?
You could put the cart before the horse and make an AJAX call to replace your main page content elements, so long as the <iframe> is a direct child of the <body> and the main content is a sibling (not a parent) of it.
That is impossible as the iFrame is part of the loaded page. The only, but very ugly, way to implement this is using a frameset..
Why not make two iframes? One as big as your body, the other one smaller, centered, and with a higher z-index.
Then just navigate the bigger iframe and leave the rest of the page alone.
Yes, it's ugly. But ugly questions ask for ugly answers :)
Is it possible to use CSS to work like frames?
What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.
Is it possible to create this effect with CSS?
Thanks.
Using frames is usually a bad idea
To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.
However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.
When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.
But, actually, frames are incredibly bad for your usability.
Your users cannot bookmark individual pages
Printing is broken
Standard features in a browser like open in new tab often breaks
Users cannot copy/paste the web address for a specific page for sending to a friend
Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.
These languages have ways of creating standard elements such as your navigation menu without the use of frames.
No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name
<iframe name="my_iframe" src="xyz.htm"></ifram>
and then be targeted in a link.
I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.
You could probably do something with the overflow part of CSS.
If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.
This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.
I have never tried this and it might need javascript to get it to work fully.