I'm trying to build up a slider in a personalized div inside a lighbox.
I use Lity for lightbox and Unslider for slides.
Unfortunately, the slider doesn't work properly, as overflow is set to "hidden" by the script (comes out it's inherited after element.style, as of Firebug).
If I force uncheck overflow for the slide element in developer tools in browser, it appears finally.
Here's the link to the actual site (click on an image):
http://foalenraged.com/david/index.php#inline7
The final version should be like this:
If there's a simple way to do the exact design with a better plugin, I'd be also greatful for the advice.
Thanks.
Related
How can a website shift effect be done like this website? http://showmyshift.com/# When you click a link, the content flies by and shifts.
I believe they are either using CSS3 or Jquery to do this, how can it be done?
EDIT: I also have no idea what this effect is called, nor have I seen it before. I'm hoping someone more experienced has seen this effect before and knows what it is.
it's just a slider, simply look for a slider that allows linking to specific slides, like Unslider (tricky if you don't know what are you doing) or Owl Carousel or the millions out there, and simply link each menu item to a slide. You can also use CSS, but for what you say about your knowledge, it's not recommended since it's way more difficult
A very generous Stack Overflow user helped me with the following drag horizontal navigation (seen here: http://jsfiddle.net/eT5MM/2/) and I'm now trying to implement the JQuery smooth horizontal scrolling as an additional form of navigation, should a user be on a mobile device: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
Unfortunately, my reference links aren't working properly, and I'm not sure if there is conflicting JavaScript, or something different. The website is not currently live, so unfortunately I'm unable to share that code, however it is nearly exactly the same as the above JSFiddle code, and I'm using
<a name="Name">
and
<a href="#Name">
to navigate the page.
Thank you!
A
using the same code of previous question, here is the clickable scrolling menu
JsFiddle
I'm trying to find out how to recreate Chrome's new tab homepage with all it's features.
I've tried plugins like isotope, however I've met a lot problems with sorting using the jQuery sortable class.
I've tried just using good`ol css with floats to create a grid, but it's nowhere close to as good as what Chrome has.
Is there a tutorial out there that covers this?
Any pointers in the right direction would be helpful
If your using chrome it'll be easier to use the inspect element function of the right click context menu. This brings up the developer console showing the elements tab. It should also take you to the meat of the layout straight away, without having to scroll through lots of lines! :)
If you haven't seen the developer tools in chrome before, it's well worth getting into! The elements panel will be of particular use:
https://developers.google.com/chrome-developer-tools/docs/elements
In short, the elements panel will give you a live view of the HTML DOM, including a view of the CSS classes that are present on any given element.
Update
From a quick look at the source myself though, it looks like a lot of it is generated in JavaScript first, i.e. the margins and widths of icons etc are set using JavaScript when you manually resize the page. I pretty sure their layout isn't just pure CSS.
I have installed "Easy Nivo Slider" plugin for WordPress in order to show a slideshow in the heading of the site I'm working on and it seems that the plugin generates things like thumbnail navigation and etc inside the IMG tag with javascript. I have never seen this method before and all the changes (margins, paddings) have no effect even close to what I'd like to get. Basically, what I want is to have a slider with a title and description place and thumbnail navigation (whereas the thumbnail is not the smaller image of it, but another one, custom one, defined in a post's custom fields (I think I can do that myself). All I need is to be able to use CSS however I want it to, because right now the only function that actually responded was the font-size.
You can see the half-done site live at http://work.codera.in/re to get a look at the code and to get a glimpse of how I want to be able to modify it in the end result is here: https://minus.com/lbyerG4OncvwdZ
Why don't you try http://wordpress.org/extend/plugins/simple-nivo-slider/ or http://wordpress.org/extend/plugins/wp-nivo-slider/ . From what i can see here wordpress.org/extend/plugins/easy-nivo-slider/ easy nivo plugin appears to be broken.
I am working on a website and stuck on an annoying problem. Firstly, please visit this page:
http://milabalami.com/saved/2/index.php Hover your mouse over the Menu on the right. You will see that the font changes colour and there is an image covering it.
Now I have implemented this Menu to a WordPress theme: http://milabalami.com/ As you can see when you hover your mouse over the menu, slider doesn't work. Why?
Issue is now resolved here: Javascript issue with easyslider
On http://miladalami.com/, you are including jQuery 3 times:
Each time you load jQuery, you're wiping out all modifications made to the jQuery.fn prototype, and thus rendering all plugins loaded before the final one is loaded useless. Remove all but the first jQuery, and update it to use version 1.4.4 instead of 1.4.2, and you should be fine.
Of course, the thinkbox plugin you're using may not function after the upgrade (1.2.4 to 1.4.4 is a rather large upgrade) but you should be able to find alternatives easily.