My page is called services and is going to be like a list of all the different services but instead of links I want them to be little graphics (I know how to do them ) and when they are clicked they open a box on top of the webpage, in the center, which displays two divs, an image on one side and text on the other?
jQuery UI is a great tool (heavy though).
Here is the page with demos and documentation you are probably looking for: http://jqueryui.com/demos/dialog/
Related
I'm using a slideshow on my website, basic functions...left and right buttons.
For some of the images, it would be nice to have an additional viewing option, where there would be mini images to the right of the main slide show image, and if you click on an individual image, it would replace the main image with that.
My reasoning is, this is an art website, and for some works it would be nice to view it from a different angle.
Does anyone know any good examples of something like this?
For reference, this is what I'm more or less using at the moment: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self
Thank you for any help.
Let's say I have a home page on which there is menu. Below it some text (added via Page) and below that a footer. If I want to add a custom section below the content (let's say one DIV with background image and text on top of it) that user could change, how would I do something like that? Or if I want to create DIV with background image and some text on top of it.
I am familiar with custom posts and custom fields, but that seems like an overkill for something like this.
Basically, I am looking for the easiest solution on which I could manage several "custom" sections (6-7) all over the site.Those sections would basically only be text, images and links. Maybe creating 6-7 widget places and then assigning their places where I need.
Purchase a theme with Visual Composer (or integrate the Visual Composer plugin to your site yourself - not for beginners). Visual Composer will allow you to easily create divs with text and images by simple clicks and drag/drop capabilities.
I have designed the following page using BootStrap, and a Google Earth plugin as a script to the page.
http://www.northeastern.edu/sds/web/demos/coldextremes.shtml
I wonder why the right dropdown menu (Precipitation) drops behind the plugin in Chrome,Version 27.0.1453.110 m. It is working fine in Firefox and IE10
thank you for your help
You need to use an <iframe> shim. This is an <iframe> positioned and sized to match your dropdown menu. I believe this is the only reliable way to overlay other content on top of the Earth plugin in all browsers.
Does the menu system you're using have an option to use a shim? If not, then you will need to add it yourself. A good place to start would be Brandon Aaron's bgiframe plugin.
Also, you will need to get rid of the rounded corners and drop shadows. Those won't work on top of the Earth plugin. You probably noticed that in Firefox, although the menu works, it has sharp edges at the bottom and right, and a pixelated corner. You'll have the same problem with the shim—it's purely rectangular. Luckily, flat design is "in" these days, so use it in this menu: square corners and no drop shadows.
Or, you could finesse the situation…
I recommend at least considering a different approach: Live with, and embrace, the limitations imposed by the Earth plugin. The plugin really wants its own space, so give it to it. Don't try to overlay your own content on top of it. Instead, put the "menu" next to it. This could be an accordion-style list, or some kind of tree, or there are any number of ways you could put some navigation in its own panel next to the Earth plugin. This will avoid all the issues with background iframes and browser compatibility.
Source: I worked on a large Earth-plugin-based product for the educational market, and we spent literally months dealing with the issues that came up as a result of wanting to overlay various kinds of menus and similar material on top of the plugin.
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.
This works fine on my computer but im wondering if its a good idea in terms of accessibility, etc.
I have a page of product listings, and I want each listing to link to a product page. The listing is made up of an image and a few photographs of text.
I want the entire listing area to be a link, including white space. So rather than make the images and text links individually, ive put the entire div in a link.
As I said, this is working fine on my computer, but is a good idea for a production site?
Thanks
If it's like a grid or something, and you give a visual cue when the user moves the mouse over the row (background color changing etc) along with the cursor becoming a hand, it should be fine if you use the whitespace as part of your link.
If you want me in your website's audience, I would prefer if you wouldn't. When switching between windows, clicking in the window area is the quickest way to switch focus between windows. If like 80% of your window is really a link, I would find that annoying. I think I am not the only one.
The way it sounds there is also plenty of area which you can make behave like a link, such as the image, and the text in the grid. If that would be clickable, that would be big enough a target to hit.
Also imagine your app being used on a touch screen. These sometimes imsinterpret drag (scroll/zoom) and tick gestures. Which is annoying if everything responds to clicks.
Look at the right-side video links on YouTube. These are block-layout spans wrapped in a tags. (Not that just because Google does it means it's a good idea, but...)
If the area has a :hover color (as these do), then it should be clear enough to the user that this is an action item.
Syntactically it's invalid, you cannot put block elements (div, p, table) inside of inline elements (span, a, strong, em).