I am trying to allow for the filling out of a form from a lightbox pop up window. One like the one that Get satisfaction uses (though I only need to be able to collect info, not display from a query as well). You can see a Get Satisfaction example at http://tweet.fabeetle.com and clicking the feedback tab.
What is the best way to do this? JQuery?
I used http://www.nickstakenburg.com/projects/lightview/ a while back and it worked very well.
bgadoci, if you're not an experienced javascript user (or you are and want to avoid a lot of unnecessary work) you'll definitely want to go with a Javascript library like jQuery. As far as choosing the right plugin, you should shop around while keeping in mind your objective. Some of them will be friendlier with forms where others are built for images only.
I can recommend colorbox from experience.
Related
Can i hide my wordpress blog site's page source like this? I have to ask this question because there are many plugins which can disable page source and right-click. but after typing manually "view-source:url" in browser it instantly shows the source-code of wordpress site.If any body knows answer please write down . this is very important for all bloggers 'I think' .
TLDR: No, you can never hide the soure code of your page. There is NO way.
For a browser to render a web site you need to send it the HTML, CSS, and javascript code. Even though you can make it "harder" to see the code by disabling right click, anyone with just a little bit of understanding of the web will be able to read it easily (F12 in most browsers).
As a website designer it is important for you to understand this concept as it is very important in deciding on how to design your web site. Things the user should not see need to happen on the server side (where no user can reach it). Only things which dont matter if anyone can see should be sent to the user.
I think you cannot hide the whole code. Or do you want to hide a specific part of the code? For example, you can hide/encrypt the URL of an iframe in which you can display more sensitive content. However, I also don't really know how to do it in WordPress (I searched for a solution many times) but I heard it's possible.
I'm curious what about the answers.
I wouldn't even consider doing this. Not only does it ruin the end-user's experience, it can actually stop people with disability copying text from your site or using other right-click menu items.
You can't hide your code, but you can obfuscate some of it.
CSS Obfuscater.
JSS Obfuscater.
I'm trying to accomplish something that might be relatively simple, but I don't know what I would call it (if there is a specific name for it), hence my searches have proved useless.
What I'm trying to accomplish is simple: I have a page built off off the Masonry jquery plugin (similar to http://designshack.net/tutorialexamples/masonry/demos/masonry.html). All I want to do is that when I click on a specific picture, it creates a "box" that fills up part of the screen and can contain another webpage (to describe the picture) while fading out most of the background. Then when I click outside of the box, it returns to all of my pictures.
I've seen this before, as I'm sure everybody else has, but for the life of me I cannot remember an example to look at or how best to do this. I don't have too much experience with javascript or jquery (which is why I'm asking this), but any help to point me in the right direction, whether it is using javascript or html/css, would be great.
If anybody does get the gist of what I'm describing and can explain it better, then you're more than welcome to edit..
What you need are modal windows.
I know the twitter bootstrap has built a pretty good framework for this:
http://getbootstrap.com/javascript/#modals
If you aren't using the bootstrap directly you might be able to pick out what you need.
There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.
I got a problem with a website that use onClick event to add items to the cart. The problem comes up to visually impaired users that cant use keybord to add the products.
I guess that bringin back the add function with a normal href="addtocard.php?id=1234" should solve the problem but on the SEO side this can effect other problems.
Is there any other way, maybe using events such as onkeypress, or that's totally related to the use of javascript? Thanks in advance.
Having an addtoCart.php?ID=5 should not have a detrimental impact on your SEO. Modern/top search engines will be smart enough to recognise what the function of that page is, and index it accordingly.
When designing sites, I forget the specific name of this type of design, but it is always best to build it upwards, that is add on the onclick/javascript functionality as an extra over the top of the base of your site, so that if users have any of these features disabled the site will still function perfectly, so that is something to consider when building your next site.
So I would recommend building the addtoCartPage. I don't think it's as bad as you think it is.
You can use something like this
Add To Cart
Or somethinkg like this
Add To Cart
It's the other way around from what your SEO consultant said. Most visually impaired people prefer keyboards. It's mice they can't use so well. The name makes you think that onclick only works with a mouse, but in general, onclick works fine for the visually impaired/non-mouse users, since it is triggered with the Enter key as well as with a mouse click. See http://webaim.org/techniques/javascript/eventhandlers#onclick.
That's why using onkeypress for accessibility is not a good idea. Jeremy Keith flatly says, "Beware of onkeypress" since even a Tab key could make it fire.
Besides progressive enhancement in general, you might try Unobtrusive Javascript in particular, which uses Javascript to rewrite links, and that means users without Javascript get regular HTML links. If Google can't follow your Javascript links, you do have an SEO problem.
I'm building a one-page(one file) site and want to get insight as to whether or not I'm taking the most practical and intelligent approach. The site is a simple site for a graphic designer. It has 4 "pages" which are "about me", "contact", "work", and "photos." What I want to do is have 4 divs(absolutely placed in the same spot) with only one visible at a time. When you click any of the links it turns the visibility of the others off and the clicked link on. There are a few ways I could do this though:
Should I use Visibility to show/hide the layers?
Should I use Z-Index to show/hide the layers?
Is jQuery the best way to handle this?
Is using classes such as .visible .hidden the best way to cycle which divs are shown/hidden?
Any other tips to doing this for maximum efficiency?
I know some will tell me to just use separate pages but the site is simple with thumbnails and most of the size is in the header and jQuery script honestly. The thumbnails are fairly small and I don't see a point to making the site with more than one page if I don't have to.
Thanks for any insight.
As Pekka indicated, there may be arguments against doing this as a single-file site. But I'll assume you have a compelling use case. Answering the question:
I would approach this like so:
Use four divs.
No need to absolutely position them, just put them one after another.
Give each div a distinct ID with a semantic name (e.g., "about", "contact", etc.).
Don't hide any of them initially, just let them show one after another. Now the page can be used by people without Javascript, and it works just fine for search engines.
On page load, use Javascript to hide all but the one you want to show.
Determine which one you want to show by looking at the anchor in the location, e.g., "#about" means you want to show the about div, "#contact" means you want to show the contact page.
When you are changing from one to another, change the anchor to match. Now the site is bookmarkable/linkable.
Consider using a history plug-in to manage the anchors, so you can get forward and back support without absolutely tearing your hair out with all the browser inconsistencies. :-)
Not an answer to your questions, but there are compelling reasons speaking against this kind of approach.
Most importantly, it won't work with JavaScript turned off. It will be completely unusable for somebody who has no JavaScript. This makes it an absolute no-no for me.
It makes it impossible to link to specific pages
It's a SEO nightmare - maybe not that important in a 4-page site but still worth mentioning
Maintenance becomes more difficult, as there are four or more complex page structures melted into one
If you are using jQuery, just call .show() and .hide() as needed to toggle the sections.
However as noted by #Pekka, it is likely better to leave these as separate pages.
I think that using Jquery would be the best way to achieve this effect. Pekka mentioned that it won't work for users who have javascript turned off, but really-how many people have javascript disabled these days? Pretty much every single website you will visit relies on javascript.
In my opinion, the best way to get tabs using jquery is to use a plugin developed by Nettuts editor, Jeffrey Way. His personal site on which the plugin is located is under construction right now but I downloaded it a while ago. Here's a link to a zip file with the necessary files inside.
Please note that I have simplified his version greatly. This means I have removed a lot of styling but this shouldn't be a problem, since you probably will want your own unique styles.
JW-Tabs
Hope this helps.