Response title
This is preview!
- Screen name: windbrand
windbrand's Profile
14 Posts
12 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 09-Mar-2013 12:32 PM
- Forum: Using jQuery
I encountered a problem with jQuery's scrollto/localscroll plugin. These plugins work by default, but if I fade in/out some containers then it somehow causes all scrollbars on the webpage to disappear.
This is the structure of my code:
CSS:.pagecontainer { overflow-y:auto; overflow-x:hidden; width:80%; height:450px; margin: 0 auto; } .pagecontainer>div{ display: none; position:relative; }
JS:<!--fade and show windows--> <script type="text/javascript"> $(document).ready(function() { $('.link').on('click', function(e){ displayNone(); $(this.getAttribute("href")).fadeIn(); } function displayNone() { $('.pagecontainer>div').fadeOut(0); } }); </script> <!--Scroll window for anchor links--> <script type="text/javascript"> $(document).ready(function() { $('.enablescroll').localScroll({ target:'.pagecontainer', /*scroll within this parent div*/ duration:500 }); }); </script>
HTML:<div class="pagecontainer"> <div id="page1"> <div class="sidelinks enablescroll"> <a href="#main">Back to main</a> <p> <a href="#page1a">Page 1 A</a> <p> <a href="#page1b">Page 1 B</a> <p> </div> <div class="content"> <div id="page1a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem. </div> <div id="page1b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem. </div> </div> <br> <br> <br> </div> <div id="page2"> <div class="sidelinks enablescroll"> <a href="#main">Back to main</a> <p> <a href="#page2a">Page 2 A</a> <p> <a href="#page2b">Page 2 B</a> <p> </div> <div class="content"> <div id="page2a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem. </div> <div id="page2b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem. </div> </div> <br> <br> <br> </div> </div>
The scrolling works fine when I first navigate to one of the pages. For example:- I go to page1, and since .pagecontainer has overflow set to auto the scrollbars appear (the text in the content section exceeds 450px height)
- I click the link for "page1b"
- The plugin will animate the scroll and scroll down to the beginning of page1b
- Then I click the link for page2
- Suddenly the scrollbars don't show up anymore, but if I click link "page2b" then it will still scroll, but simply without a visible scrollbar
- I go to other pages of my website (not displayed here for simplicity), the scrollbars for those pages are gone too. It only fixes itself if I refresh the page
This is the webpage for jQuery.localscroll (as well as links to scrollto, they're similar I think): http://flesler.blogspot.ca/2007/10/jquerylocalscroll-10.html
Does anyone have an idea what might be causing this problem? Thanks.
- 05-Mar-2013 04:49 PM
- Forum: Using jQuery
This is an update to my last question which I've made some progress with the help of some members.
I've got multiple instances of the html5 audio player on my page, and I use the jQuery fadeIn() fadeOut() to determine which song to play. When clicking a link to a different page, I have the current playing sound fade out volume, then stop, then reset progress to 0 seconds, then the page (along with the audio player) fades out and the new page (along with that page's audio player) fades in. I'm able to fade out the volume, but I can't stop the music or reset the timer to 0 seconds for some reason:
<script> $('.link').on('click', function(e){ $('audio').currentTime = 0; /*reset timer*/ displayNone(); /*fade out current page*/ $(this.getAttribute("href")).fadeIn(); /*fade in target page*/ stopAudio(); }); function displayNone() { $('.pagecontainer>div').fadeOut(); } function stopAudio() { //fade out any current audio $('audio').animate({volume: 0}, 1000); setTimeout(function(){('audio').pause()},1000) /*stop audio after fading out volume*/ } $('.sound').on('play', function () { $('audio').animate({volume: 1}, 100); /*reset volume to 100% after clicking play button on player*/ }); </script> .... .... <a href="page1" class="link">page 1</a> <a href="page2" class="link">page 2</a> <a href="page3" class="link">page 3</a> <div class="pagecontainer"> <div id="page1"> <audio controls class="sound"> <source src="music1.mp3"/> <source src="music1.ogg"/> </audio> </div> <div id="page2"> <audio controls class="sound"> <source src="music2.mp3"/> <source src="music2.ogg"/> </audio> </div> <div id="page3"> <audio controls class="sound"> <source src="music3.mp3"/> <source src="music3.ogg"/> </audio> </div> </div>
For example:I'm currently on page1, with music1.mp3 already playing for 10 seconds
I click the link to page2 without stopping music1.mp3, and music1.mp3 volume fades out along with with page1, and page2 fades in successfully along with a new instance of the music player for music2.mp3
After let's say 10 seconds I click link for page1 to go back to page1
The player for music1.mp3 is still playing (progress is 20 seconds) and haven't stopped, but now with zero volume
I don't get why music1.mp3 is not resetting its timer to 0 seconds and stopping fully.
The code works if I only have 1 instance of the audio player (ie, say only page1 has an audio player, page2 and page3 contains no audio player and text only.
Is it something wrong with $('audio').pause() or $('audio').currentTime = 0; (or both) not registering when there are multiple instances of ('audio')?
Thanks!
- Why does it automatically remove all line breaks when I paste in code?
For example when I paste in something like this:
<div>123123</div>
<div>123123</div>
<div>123123</div>
After I post the message, it turns into this??
<div>123123</div><div>123123</div><div>123123</div>
If I try to manually separate them, then each line turns into this huge empty code block.- 04-Mar-2013 06:33 PM
- Forum: Using jQuery
Is there some JQuery of javascript function that simply makes a div unscrollable to its parent div, but scrollable relative to viewport?- #pagecontainer>div {
- margin-left:50px;
- margin-top:50px;
- }
<div id="pagecontainer"> <div id="page1"> <div class="unscrollable"> <!--UNSCROLLABLE--> <a href="#page1" class="link">Link 1</a> <p> <a href="#page2" class="link">Link 2</a> <p> <a href="#page3" class="link">Link 3</a> <p> <a href="#page4" class="link">Link 4</a> <p> </div> <div class="scrollable"> <!--SCROLLABLE--> content content content </div> </div> <div id="page2"> <div class="unscrollable"> <!--UNSCROLLABLE--> <a href="#page1" class="link">Link 1</a> <p> <a href="#page2" class="link">Link 2</a> <p> <a href="#page3" class="link">Link 3</a> <p> <a href="#page4" class="link">Link 4</a> <p> </div> <div class="scrollable"> <!--SCROLLABLE--> content content content </div> </div> </div>
Unscrollable content has to be inside the parent div #pageX, with multiple #pageX pages inside parent #pagecontainer.
I've tried like everything css-wise, in terms of setting pagecontainer/page#/unscrollable/scrollable to relative/absolute. Nothing works. It also won't work if I set .scrollable to overflow:auto instead of #pagecontainer to overflow:auto, because then I'll get this nasty 50px gap in the scrollbar with top of the pagecontainer, as #pageX has a margin of 50px and it's now scrolling relative to #pageX instead of #pagecontainer.- Hello everyone,
My webpage uses javascript to fade in/out pages, so everything is in one html file (yes I know it's not as SEO-effective but I just like this style and it has no loading time, and it's not a commercial website anyways). On some pages I have background music, I'm trying to have any music playing currently to fade out when I click a link to another page then have the music assigned to that page fade in. Since it's all in one html file the music won't stop automatically as all the page links are just anchor links to a div.
This is the format of my code:- <!--fade and show windows-->
<script type="text/javascript">
$(document).ready(function() {
$('.aboutbutton').click(function() {
displayNone();
showWindow("aboutpage");
} );
....
....
function displayNone() {
$('#homepage,#aboutpage,#blueprintpage,#budgetpage,#musicpage').fadeOut();
}
function showWindow(name) {
$('#' + name).fadeIn();
}
});
</script>
...
...
<body>
<a href="#aboutpage" class="aboutbutton">About</a>
<a href="#blueprintpage" class="blueprintbutton">Blueprint</a>
...
...
<div id="aboutpage">
//CONTENT OF THIS PAGE//
</div>
<div id="blueprintpage">
//CONTENT OF THIS PAGE//
</div>
....
....
<!--simple pause/play music button at bottom of page using flash-->
<div class="backgroundmusic">
<span class="whitetext backgroundmusictext">Background music </span>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="25" height="20"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="../site/swf/singlemp3player.swf?file=../site/music/OST/wenqing.mp3&backColor=990000&frontColor=ddddff&repeatPlay=true&autoStart=true&songVolume=30" />
<param name="wmode" value="transparent" />
<embed wmode="transparent" width="25" height="20" src="../site/swf/singlemp3player.swf?file=../site/music/OST/xianjian.mp3&backColor=990000&frontColor=ddddff&repeatPlay=true&autoStart=true&songVolume=30"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
That is the format of my code. As you can see there are a few pages like "aboutpage" "blueprintpage" etc. What I'm trying to do is assign a background music to each page. If I'm currently on "aboutpage" and "aboutpagemusic.mp3" is playing, and I click the link to "blueprintpage", I'd like all music to fade out, then "blueprintmusic.mp3" to fade in. Some kind of javascript function to "fade all currently playing music", then once it's done fading out fade in another track, and hook this to some anchor link class/ID.
I know I'm gonna get some comments regarding "oh don't put background music that auto-plays". Well firstly it's a personal music website, secondly they're all my compositions, and thirdly none of them are the eardrum-blasting mainstream stuff. So it's not a problem.
I'd appreciate any help on this, thanks.- Can anyone identify what image slider is used here on this Wacom tablet page: http://www.wacom.com/products/pen-tablets/intuos/intuos5-touch-medium
I did check the source code, it mentions "anything slider", which I googled, but the anything slider does ont seem to have those cool zoom in/out slide left/right effects on that Wacom page, or resemble the style featured on that page (caption, row of buttons, etc).
An identification on what slider was used on that page, or a similar slider that supports those slow zoom in/out slide left/right effects would be great. Notice the animations seem to be random as it's not limited to just zooms.- Does anyone know of an audio player that supports song descriptions, and possibly multiple playlists for multiple instances of it? I've searched all over the web, from jplayer, jwplayer, to sound manager and audio.js, none of them supports the basic feature song descriptions. All I need is when I click a song in a playlist, some information about the song shows up, either fades in directly on the player itself or on an adjacent div or anything. I've tried adding this feature to a couple of the audio players I found but it doesn't work, and the player code itself is simply way too complex to engineer, it's like trying to manipulate the entire JQuery library code. Multiple playlists is really secondary, I know JPlayer supports this, but it doesn't support song descriptions.
- Does anyone know where I can find a tutorial on creating an image gallery similar to iTunes' album art slideshow, where the pictures are stacked with each other diagonally?
Picture:
I've seen a person's blog with a slideshow like this but that person's blog no longer exists. =/
This tutorial is the only one I've found that has a similar style: mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/
However I don't want the big central image and I'm not sure how to remove that. I just need a horizontal stack of images, and each image serves as a link. E.g., click on a picture to go to another page.
Thanks.- Does anyone know how to make links fade in a glow when the mouse hovers over it, but for JQuery 1.6.4? I know the newest version is 1.8.x, but that version for some reason breaks my website's preloader, and I'm too tired to figure out why it doesn't want to work with 1.8.x, so I'm stuck with 1.6.4, which isn't too old I think. I've googled all over the place and found a few tutorials on link glows (JQuery-color, JQuery-color-animation, etc), but all of these only work for JQuery 1.2.x or 1.8.x after some testing.
Thanks.- 07-Jan-2012 11:12 PM
- Forum: Using jQuery
I'm trying to add a link to some of the song titles in a jPlayer playlist, with the fade in/out effect. This effect is working fine on the rest of my website, however when I place an <a href> link in the playlist titles, it does not seem to work (all it does is change the URL from www.mywebsite.com to www.mywebsite.com/#page_clicked ). This is the javascript I used for playlist:- <!--jPlayer playlist-->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"Song 1 <a href='#descriptionpage' class='descriptionbutton'>description</a>",mp3:"___",
oga:"___"
},
{
title:"Song 2",
mp3:"___",
oga:"___"
}
], {
swfPath: "../js",
solution:"html,flash",
supplied: "oga, mp3",
wmode: "window"
});
});
//]]>
</script>
<script type="text/javascript">
(function() {
var s = document.createElement('script'), t = document.getElementsByTagName( 'script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
t.parentNode.insertBefore(s, t);
})();
</script>
This is the code that does the fade in/out effect:- <script type="text/javascript">
$(document).ready(function() {
setTimeout(function() { shosWindow("pagecontainer") }, 500);
setTimeout(function() { showWindow("songpage") }, 500);
//Music descriptions
$('.descriptionbutton').click(function() {displayNone();
setTimeout(showWindow("descriptionpage"), 2000);
} );
function displayNone() {
$('#songpage').fadeOut(0);
$('#descriptionpage').fadeOut(0);
}
function showWindow(name) {
$('#' + name).fadeIn();
}
});
</script>
This is my html (snipped unrelevant code):- <html>
<body>
<div id="pagecontainer">
<div id="songpage">
ALL THE JPLAYER CODE GOES HERE
</div>
...
...
<div id="descriptionpage">
Description of the song
</div>
</div>
...
...
</body>
</html>
description</a>" is placed within the <body>, but if placed in the jplayer javascript (since that's where I have to edit song titles), this code doesn't work anymore.
Thanks for help.- 30-Dec-2011 01:21 PM
- Forum: Using jQuery
Is anyone familiar with jPlayer? Specifically the audio player that supports a playlist.
I was wondering if it's possible to add simple styles (font, color, italic, etc) to the playlist titles text? What I mean is this section of the javascript:<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"My_song", <--------- add <br> <i> <b> <font> tags to this
mp3:"___",
oga:"___"
},...
I tried to add those tags but they would just show up as text, not the actual functions. I also tried converting them to html entities but that didn't work either.- Is anyone familiar with the audio (not video) playlist object for jPlayer? There doesn't seem to be a guide of any kind on how to implement the playlist on their site, they only show you how to build a basic one-song audio player that's same as the html <audio> tag. The playlist is shown here: http://www.jplayer.org/latest/demo-02/
Can someone show me how to add a playlist to the basic jPlayer?- Can anyone recommend to me a simple email contact form (only styling I need is font and button color pretty much) that has instant email validation (meaning it will say "invalid email" the moment you click another textbox if email entered is invalid, and not wait until you click "send message")? Only fields I need are "name", "email", optional "phone", and "message". I searched on google but did not find any. Yes I checked those blogs with "30 useful jquery contact forms", but all the ones I checked either had dead links, author forgot to include certain files, did not include the actual php to send email and was only a scriptless form, or did not have instant email validation. My favourite one was "Lightform", however the author took down the download link as well as the tutorial link. -__- ~Thanks
- Does anyone know if there are useful scripts in jQuery that allows me to create a page slide effect like this website? http://www.hotel-oxford.ro/
I think the logic behind it is that it loads every single web page of the entire website first, pans them out horizontally, then shifts the page left or right X amount of pixels depending on which link is clicked. I'm pretty new to javascript so I'm not sure where to look, and I don't understand half the code by looking at the source code either. Please point me in the right direction.
Thanks.
- <!--fade and show windows-->
© 2013 jQuery Foundation
Sponsored by
and others.