I'm currently re-designing my portfolio site & I would like to use the best non-flash method possible to create the following slideshow shown in my layout:
http://oi49.tinypic.com/xeifeq.jpg
I would only have 3 slides or so in the show, and I would like to overlay left/right nav buttons as shown.
So how do I go about this?
There are tons of options. With javascript libraries like jQuery, a lot of animations that needed flash once, can be easily done.
Try googling, jQuery Sliders
Although you could use a pure CSS solution you'd get better browser support by using javascript to animate your slideshow.
There's roughly a billion javascript plugins to do this for you, but here's a good one - http://css-tricks.com/examples/AnythingSlider/
You can tweak the CSS of most plugins to get the overlaying arrow effect you want. The method I would use for this is to set the container for the slideshow to position:relative and then set the arrows to be position:absolute ...so for example the left arrow can now be positioned using top:50% left:0
Good luck!
Related
I have a requirement like what we can see in the below link,
http://custom.case-mate.com/diy?bypassLandingPage=true#design/iphone5_barelythere
after opening the link please select a layout from the left side of the editor, then a placeholder section will come over the canvas!, how i can achieve the same? are they using html or image? is there any specific libraries available which can help me achieve this ?
I know they are using jquery UI droppable for dragging and placing the image over the place holders, but how that layout area over the canvas works ?
I am using fabric.js in my project!
Thanks in advance for any help,
looking the editor with firebug you can see there are 4 total elements, with one of them being a ui-droppable item.
there are many libraries aorund that extend default behaviour, raphaelJS kinetikJs, threeJs; with a rapid google search this link came out
I tried using Mosaic (http://buildinternet.com/project/mosaic/) as a jQuery caption plugin (I need the 'slide up' effect) but this one didn't work for images with different height, and I had to change my html structure.
I also tried Capty (http://iwantaneff.in/repo/plugins/effects-ui/capty/index.html) but this one does not work on images that I load with infinitescroll when I reach the bottom of my page. Because it uses the .hover() function instead of the .on() function.
Where can I find a jQuery caption plugin that supports this?
I used a html5, css3, transition combination
http://jsfiddle.net/hashie5/5p7Jk/
We are in the process of importing some old pages from our legacy website which was designed in tables into our new DIV based layout. Our site is built on a PHP include system, so we have our pages split into three components; header, body, and footer. These old pages need to be pulled in for our launch of revision 1.0, and then as we get all of the wrinkles ironed out, we will redesign.
Our header component is working out just fine, and the body content displays as it should, but unfortunately the existing footer element plugs into the bottom of the table. Our footer for the new design extends for 100% of the width, but the existing table only allows for 960px width. Thus our footer is getting cut off.
We are trying to find a dynamic solution, either a using JavaScript, or the jQuery Attr() call to dynamically effect the table dimensions to allow the footer to extend to the edge of the page, yet everything I have tried does not modify the table dimensions or allow overfow to show at all.
Here are a couple of screenshots for you to see what I am talking about.
Div layout:
Table Layout:
If you like to take a peek at the code, you can look at my Demo Page, but just know that this is a demo version which is not using PHP to pull in the components. Its a simple HTML/CSS based layout I have been using to search for alternatives. (I'm not a PHP guy)
We are trying to avoid having to go through hundreds of documents and cutting and pasting the footer in below the table, or having to modify any other code by hand. If we could just include a CSS or JavaScript doc in the header that would render a workaround is the ideal solution.
You can also make a div with the footer Background - separate from the contents and underneath. Put a div with the same css styles as 'footer' after your element. Then you can take the background image (footer_bg.jpg repeat-x) off of footer.
See campdavidozarks.org for a website I made with the same idea.
Center the table, and use the same footer-background on the parent, 100% width element, too with alignment to the bottom and no-repeat on y. Done. Pure CSS solution.
In my page I give a certain size to a DIV with jQuery, based on the size of the last tweet that I retrieve through PHP.
Problem : I need to use jQuery(window).bind("load", function() in order for jQuery to "see" the size of the tweet, but then, I can see the resizing (perfomed my jQuery) in front of my eyes and I dislike it. I want the page to appear in its final state.
Is that possible ?
You have two options. 1) Start off with your tweet element hidden, then show/fade it in when everything is loaded.
2) My preferred solution is to call the $.blockUI() plugin as soon possible, and then $.unblockUI when everything has loaded. The blockUI plugin also has a facility for blocking only certain elements rather than the whole page, there is a demo here
You can always let it render at a top margin of -1000px and then pop it back down, or perhaps z-index it underneath something else.
Some browsers have problems "seeing" hidden divs while some can do it, but it's unrelible so best bet is to render it outside the canvas.
I'm making a webpage that needs to switch between background images on a page, where the user can click on back and forth arrows to sift through each background while browsing.
For each background there needs to be a dynamic description for each image.
For example, the user may load the page and see the body background with a description for what it is, and then click on the right arrow and the background changes, along with the description for the new background.
Does anyone know of a way to implement this, or know of a plug in that already does it?
jQuery Tools, probably Tabs.
Easy to set up, lightweight, encourages good HTML, and completely customizable via CSS.
Why don't you try Supersized?
Seems to be exactly what you are -were- looking for!