Jump to content

Search the Community

Showing results for tags 'interactive'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • The Web Designer Forum Community
    • Web Designer Forum News
    • Web Designer Forum Introductions
    • General Chat
    • Design Competitions
  • Web Design Resource
    • Website Design and Layout
    • Website Reviews and Feedback
    • Other Resources
    • Graphic Design Forum
  • Web Development
    • Frontend
    • Server Side
    • Content Management Systems (CMS)
  • SEO, Website Marketing and Business
    • Social Media
    • Freelancing, Business and Legal Discussion
    • SEO (Search Engine Optimisation) & Search Engines
    • Website Management
  • Software & Hardware
    • Web Browsers
    • Web Design Scripts & Software
    • Web Development Scripts & Software
    • Hardware
  • The Marketplace

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


Skype


Location


Interests

Found 2 results

  1. jmerlinb

    Weebly custom HTML/CSS help?

    Dear all, Would anyone be able to tell me how to edit the HTML of my Weebly website's banner image (the bike in the rain)? I know it must be somewhere under Design > Edit HTML/CSS, but as I have little HTML knowledge, I am unsure where to look. If it helps, the end game is to make the banner image interactive (so that it changes back and forth between two images upon mouse over or clicking). Take a look: www.lightcycles.xyz
  2. Hi everyone. I was wondering if someone could please help me with my turn.js book that I'm making? I'm trying to make this journal-type book and recently learned how to change the size of pages with the .own-size CSS class. The problem I'm having with my book now is that the front and back covers remain where they are after I've closed the book. I've tried experimenting with background colours in the CSS and I've tried switching between "fixed hard" and "hard" in the div tags but have had no luck. This a link to my book as it is now to let you see what I mean http://mystic-akairyuu.zxq.net This is the effect I'm trying to get http://www.turnjs.com#samples/html5/1 I would appreciate any help as I am almost at my wits end This is the code in my main index page <!doctype html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/turn.js"></script> <style type="text/css"> #magazine{ width:1002px; height:773px; } #magazine .page-wrapper{ -webkit-perspective:2000px; -moz-perspective: 2000px; -ms-perspective: 2000px; perspective: 2000px; } #magazine .p3, #magazine .p4, #magazine .p5, #magazine .p6, #magazine .p7, #magazine .p8, #magazine .p9, #magazine .p10{ width:470px; height:732px; } #magazine .turn-page{ background-color:#ccc; background-size:100% 100%; } </style> </head> <body> <div id="magazine"> <div class="fixed hard" style="background-image:url(pages/InsideandBack.png);">A book</div> <div class="fixed hard" style="background-image:url(pages/InsideandBack.png);"></div> <div class="sheet own-size" style="background-image:url(pages/oldpaperright.png);"></div> <div class="sheet own-size" style="background-image:url(pages/oldpaperleft.png);"></div> <div class="sheet own-size" style="background-image:url(pages/oldpaperright.png);"></div> <div class="sheet own-size" style="background-image:url(pages/oldpaperleft.png);"></div> <div class="sheet own-size" style="background-image:url(pages/oldpaperright.png);"></div> <div class="sheet own-size" style="background-image:url(pages/oldpaperleft.png);"></div> <div class="sheet own-size" style="background-image:url(pages/oldpaperright.png);"></div> <div class="sheet own-size" style="background-image:url(pages/oldpaperleft.png);"></div> <div class="fixed hard" style="background-image:url(pages/InsideandBack.png);"></div> <div class="fixed hard" style="background-image:url(pages/InsideandBack.png);"></div> </div> <script type="text/javascript"> $(window).ready(function() { $('#magazine').turn({ display: 'double', //assigning display style acceleration: true, gradients: !$.isTouch, elevation:50, when: { turned: function(e, page) { /*console.log('Current view: ', $(this).turn('view'));*/ } } }); }); $(window).bind('keydown', function(e){ if (e.keyCode==37) $('#magazine').turn('previous'); else if (e.keyCode==39) $('#magazine').turn('next'); }); </script> </body> </html>
×