I'm looking at this book pages turning script:
www.turnjs.com/#samples/magazine1
There are many options for customization, however it seems there isn't an option for what I want to do.
The way it is now, in order to turn a page, you have to hover somewhere near the corners.
Only then the page corner turns and you somehow guess that by clicking you can go to the next page.
What I want is to make all the area clickable; wherever the mouse hovers, inside the book, one corner or another should bend.
I know I may have to edit the code directly somewhere, but I couldn't find the place although I tried.
It seems all CSS for page turning is inside turn.js file
If somebody can find the code line to be edited, please let me know.
Thanks
The jquery hover will give you the answer for this. Try include this code in your document ready function.
$(".turn-page").hover(function() {
$(this).css({"transform": "rotate(-45deg) translate3d(262px, -263px, 0px)"});
$(this).parent().css({"transform": "translate3d(-633px, 68px, 0px) rotate(45deg)"});
});
Note: This is for testing purpose only. Remove the lines in hover function and add your codes.
Related
I'm trying to create this Icon Animate effect for my personal work. As they are using images to draw icon on hover. Any other trick to use this one. Please advise
Live Working Link
http://puu.sh/pAksc/8c81c44718.png
Man... I think you don't understand at all what you are talking about ...
Here are some things you should try and understand first.
First, have you tried any piece of code or looked for a tutorial ?! Usually if you post a question on Stackoverflow, you're not asking people to do your job, you must first have tried things and have a code example to show...
Start here : https://css-tricks.com/svg-line-animation-works/ This should do what you want to do.
Then you just have to trigger the animation on div:hover
Second this won't work with a png. This only work with specific SVG images. First take a look at what an SVG image is and how to work with it in HTML/CSS.
Third you don't need any jQuery here so leave that aside if that's the only thing that requires jquery in your website.
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
I got a small problem with my webpage.
http://sabinequardon.dk/Portfolio/#portfolio
When you click on "photography" the gallery shows just fine,
but then when you click on "photoshop" something's wrong.
I've copied the exact same code into the photoshop-section, and used javascript fadeIn & fadeOut to show the dif. content, but it doesn't work.
Javascript here: http://sabinequardon.dk/Portfolio/assets/js/gallery.js
Do i really have to give it different names/classes, and make both css and javascript several times to make it work?
I tried everything, just can't seem to find the mistake.
Thanks!
- Sabine
This plugin is not written to be used in the way, that it can be reused for multiple galleries on one page, and it would need some massive work to enable this functionality for it.
Quickiest and easiest call for you would be just separat Photography and Photoshop into differeent html documents, so the ids will not colide
Best wishes
Marian
I can use CSS or javascript but I've been struggling with it. It needs to be an "on-click" behavior when you click on the number in the lower right corner... like this one: http://www.winteradagency.com/mrw/images/residential2.jpg
So that when you click on #1 you get the first photo, #2 the 2nd one and so on...
Any ideas?
thanks!
Without showing what you've tried, I'm a little reluctant to just give you the answer. You'll learn more if I don't. If you provide code and show where you're stuck and such, well, that's a different story.
That being said, if you want to use jQuery, there are some nice plugins that have a similar functionality to what you want. One of them being Easy Slider. Here's also a list of 15 jQuery Image Gallery Plugins that I got from doing a quick google search.
Why not create four buttons and align it to right end, and everytime the image changes you update the text of the buttons. Each button could simply update the image to the one corresponding to its number.
I would like to have a link on my site that when you click it a site segment that hovers above the content appears and displays some information until it is closed in some way, and I would like to be able to insert anything I want to in there- text, images, CSS formatting, etc.
What language should I use for this? Do you know any sites that do this? Also a link to relevant libraries would be appreciated.
javascript is used for such client side tasks such as this. The library jquery will be imensensly helpful. Basically what happens is when you hover your mouse over an image (or whatever you like) a div gets its display property switched and is positioned at the appropriate coordinates. Since this is a div, you can insert into it anything you would have in a webpage, images, CSS, flash, or whatever you like.
If I understand well the requirements, you need to use JavaScript, <div>s and the CSS property "display".
Check out Prototype Window Xilinus. They have exactly you're looking for.