I'm working on a page that has some ads on it. One of them loads in an ad with wmode=window. I don't have the ability to change that flash code. I need to put a modal box on top of that flash element, but every combination of using z-indexes and iframe shims has failed (both manually and using bgiframe). Is there a way to place html content on top of a flash element with wmode=window? I'm testing this in chrome so far... figuring if I can't at least get it to work there, it won't work anywhere.
I'm afraid there is no way around it.
WMODE-window forces the browser to render the element on the very top layer, and it will overlap everything.
Rob
Yes it is possible, i had done this before using php and Css, your right though i did use the index "z" properties in my CSS Sheets than i had used php divs to what your trying to do, i maned to get 3 transparent flash Movies on top of each other , it was a pain for me and not much documents on this at the time,
trial and error is your best go, i had deleted my old web server i had used this method for, if you get desperate i will have a look through backup drives, but it is possible so dont give up
Related
I am trying to use the built in inspector tool in Google Chrome to manipulate the site http://www.di.se (as it probably has one of the most # layouts I have ever seen on a popular website) with around 300 000 visitors daily.
It seems to be mainly built with three HTML frame tags with the names: historyFrame, headerFrame and contentFrame. I can remove the headerFrame that covers a huge part of the view. However, I don't know how to change the contentFrame size so that it will cover the entire screen.
I have tried to add a CSS height property but it does not seem to change anything. If this is solvable I would be very thankful and so would 300000 other users :) Thanks!
The frameset, which is the parent of the frame you removed, specifies the heights for each of the frames, currently rows="0,210,*". So if you remove the header frame, the content frame becomes the second frame and gets a height of 210. By changing this attribute to 0,* the problem should be fixed.
However I'm not able to modify this property in Chrome's toolkit. Maybe this is a limitation of the developer tools of Chrome. After all, frames are old (removed even from HTML5), so maybe they didn't pay much attention to supporting it.
Note though that the top frame contains the advertising that probably pays for the site. If you got this working and all 300.000 users would use your solution, then the site would probably seize to exist, and you got 300.000 unhappy users. So think twice before you do this.
You can do it by:
First deleting the first Frame(header)
and modify this:
from:
rows=".260,*"
To:
rows="1,*"
So you have only the frame you want, no useless data and the frame you want take 100% of the screen.
I'm trying to create a gallery for a mobile site where I have different stylesheets for different sized devices. Within these stylesheets I have several classes which simply set a background url property to each image I want in the gallery.
Only one of these will be displayed at a time. And I will be cycling through the classes using Javascript to display them in a slideshow type presentation.
I am wondering is this method more bandwidth efficient than having all the images as individual img tags within the DOM? By setting these url properties do they get downloaded to the user's browser when they first load the site or are they only downloaded when the class gets set on a div in the DOM?
Simply I am trying to avoid having to download all the different images to the user's device at once. If you know any alternate methods which are better for this sort of thing I am also interested.
You are right, When you set the image backround, the image will only be downloaded if it is used, By this I mean, used as a style on some dom element.
Alternatively, you could 'change' the background-image css property using javascript. This way, you don't even have the image url in your CSS.
If bandwidth is your biggest concern, I would urge you to have a look at the inspector in webkit browsers like Chrome or safari, or with firebug on Firefox to see the 'network' tab, there you have a clear overview of what is loaded, how ( what order ) and how to optimize things. You can also make some stupid mistakes clear like downloading multiple times the same library from different locations and so.
If you just declare the class in css it shouldn't download anything before it is set. however it is a round question and the answer could take a lot of different shapes.
So I would say that yes it is a good way to do it, and it should be more bandwidth efficient (if you don't know that all the images will be loaded eventually anyhow, since you will typically have asynchronous image-loading either way it shouldn't matter much. I guess that if you only load one image initially the other images (i.e. the mentioned img tags) will not interfere making the load a bit more smooth?).
I find it to be a cleaner solution at least if you aren't sure which images will be viewed (which is likely to believe) to use your css-approach. also it's easier to maintain and provide a better design.
That you will be using javascript indicate that you are also doing the client side. And that give you control to choose what to do which is great :)
One alternative could be to have a local cache of the images as well, but that really depends on the problem at hand, if you will have different images and no real possibility to know in advance which images you will need (and perhaps not even how many of them?) then I think that the cleanest way is the way you purpose.
i.e. set up (or dynamically create) css-classes for images and handle all the logic in javascript.
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.
i have a image that i don't want it drag-able or selectable so that no drag to other places on the page. how is that done?
If you want your visitors/users to see the resource on your page there is no way to stop them downloading it or saving it.
Possible options:
You can use JavaScript to prevent the context-menu popping up on right-click (related article: http://javascript.about.com/library/blnoright.htm).
You can cover the image with a transparent .png or .gif so that clicking on the image simple returns the transparent image.
But if the user can see the image on the webpage then it's already on their computer.
In reality this is far harder than you may think it will be, I assume you don't want people stealing your images which is a fair enough thing but just remember all the different ways in which someone can get an image from a web site. Your can catch the right click event and stop them at least doing that, but they can always just take a screenshot and save that instead. This is a slippery slope and it always ends the same way, if they really want to steal it, they're going to.
Since the image is just a binary data, and all the data is written on client PC's, for displaying reason it's up to th euser what they'll do with the data. There's no way you can prevent them from saving the picture displayed on a website.
All you might do is make it a little bit harder, by blocking right clicking on image, (displaying alert on right click, or something like this). But if the user really wants to save the picture they will do this anyway.
Why should you do it?
I can suggest a javascript that will able it: http://www.brownielocks.com/stopcopying.html
But every one, even with little experience can view the source and copy it. and even if you block them from viewing the source, they can use wireshark and get the picture directly. Even if you use flash to show the picture one can screen-capture the screen and retrieve the picture.
Put a watermark on the picture and use http://www.tineye.com/ from time to time and search for your picture. If you find others that use your picture - sue them. It is the most effective way.
It is impossible to prevent someone to store an image (or other resources) on their computer as others already have mentioned.
But another trick to make it harder (impossible for inexperienced people I guess) is to use CSS and background images:
<div style='background: url("myimage.gif");'></div>
The image is now on the background of the <div> block and cannot be dragged or right clicked in order to save it.
Using some coding knowledge it is possible to ind out the myimage.gif part, which can be added after the base URL in order download the image and save it. For example if the HTML page is at http://www.example.com/mypage.html the image could be found at http://www.example.com/myimage.gif
As I mentioned it is still possible to save the image, but for inexperienced people it is a lot harder.
Note: In this example the image is just put in the HTML tag, but with proper use of a CSS file, it is even harder to find for inexperienced people.
You cannot prevent a user from saving something from the web to his PC. The nearest thing that comes to my mind is the -moz-user-select CSS property... https://developer.mozilla.org/en/CSS/-moz-user-select
This javascript snippet does exactly what OP asks:
document.addEventListener("dragstart", preventDrag);
function preventDrag(event) {
event.preventDefault();
}
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.