|
JavaScript - Interactive Content
Hi all,
I was asked by a friend if I could help with a school kids website. The general website stuff I am fine with however they are looking for some interactive content. Stuff they seem interested in are e.g.quizes, like 10 questions and after you finish you see how many you got right and the correct answers perhaps. Are there Javascripts available that will do this? Any ideas on recommendations or any other scripts/content that could be good on a kids site is of interest. Thanks Similar TutorialsHi everyone, I'm pretty new to JS and I was wondering if anyone could put me on the right track to developing a slideshow which you can flip between the images manually or let it run through itself (and preferably contain links to other pages). Basically, like the one at the top of the Valve website: http://www.valvesoftware.com/index.html Thanks all I need to create an interactive map similar to the one on this site: http://viewers-guide.hbo.com/game-of-thrones/#!/map/ It is a map of a fictional area ( a real area but there are fictional buildings and characters on it) so I don't think google maps plugins are suitable. I don't want to reinvent the wheel, so if anybody has a good suggestion of a good jquery/javascript solution for interactive maps, please refer me to the relevant information. In other words, I need a map where by clicking the objects on the map, a popup window pops up with additional information about the 'scene' or a 'character'. In addition, the map will be dark from the beginning and more and more sites and characters will be revealed on it every week. Thanks for any tips! Can anyone suggest a non-Flash USA map that allows for popup? I've only found one online.
Hi there, for a site I'm working on I needed an interactive crossfading slideshow (one that doesn't just run automatically, but with 'previous' and 'next' links) and noticed that all the solutions I stumbled upon fall into one of two categories: 1.) the ones that in some way or other break if the user clicks too fast through the images (i.e. fast enough that the previous crossfade is not completely finished when triggering the next one) 2.) the ones that block any user interactions until the last crossfade is finished Obviously neither is very useful, so I wrote my own. I'm just wondering now, does anyone of you know of any good reusable crossfading slideshow that not only works as it should, but does so without blocking user interaction while fading? As a user, I don't have the patience for those time wasters any more. If there's nothing good out there, I'm tempted to make it a jQuery plugin, but I wouldn't much like to find out later that there has been a perfectly good plugin out there all along. So, if you know of one or have any other helpful suggestions, please tell me. I would appreciate if anyone could guide my point by point on how one could create a category picker just like gumtree (preferably in jquery): http://www.gumtree.com/add_posting.html?location_id=uk Specifically the points How clicking on a category opens another to the right How clicking on a category appends a variable like "#cat-10201" into the url (and vice versa) How css lists are used instead of form select menus (making it easily styled) How clicking on a deep subcategory automatically preselects all parent categories I'm not looking for anyone to actually code it for me (that would be outrageous ) but tips on how it's actually structured and steps on how it can be coded would be highly appreciated. I can do PHP and I know CSS also. I don't know plain javascript but I'm sure I can do most of it in jQuery Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
Hello. I'm creating a simple auto updating script based on PHP and using jQuery to set the interval to 1000 miliseconds. It works in FireFox, as the only one I've tested so far, but in Internet Explorer (Version 7 right now, didn't test others) it just freezes and doesn't auto update. Doesn't auto update either if I refresh the page, so something's messed up here. I'm using the same way of auto updating on other things, such as a chat-page - works on those in all browsers, so I'm kinda on a lost track here. Here's the JavaScript/jQuery: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function loadContent() {
$('#count').load('counter.php', function() {
setTimeout("loadContent()", 1000);
});
return false;
}
$(loadContent);
And this is what I put on the body of the page: Code: <div id="count"></div> Can anyone see what my problem is? And any workarounds for this? I have two effects, one is a fadein effect and one is a smooth scrolling effect. I also have a simple image slider but that isn't the problem. It doesn't seem like the fadein is the problem either because when I had non-scrolling (positioned absolute) content "fadein", it wouldn't fadein in IE but at least it showed up, whereas the main content is blocked in IE with a dialogue about not running scripts or activex. Is there a way to overwrite this? I tried running the basic example of smooth scrolling in IE9 and it worked fine without being blocked. My code seems the same! I would be ok with the content just not fading in when using IE9, but if a user doesn't know to enable activex scripts from the dialogue box (assuming they even get a dialogue box), they won't be able to read any of the content which is an issue. Here's the JavaScript in the head section: Code: <script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');}
</script>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
<link href="slider2.css" rel="stylesheet" type="text/css" media="screen" />
<script>
function fadein(){var fade=0,fadein=document.getElementById("fadein").style,ms=(fadein.opacity==0)?0:1,pace=setInterval(Fade,40);function Fade(){if(fade<100){fade+=2;if(ms)fadein.filter="alpha(opacity="+fade+")";else fadein.opacity=(fade/100)}else clearInterval(pace)}};
window.onload=fadein;
</script>
</head>
I can't really get any help over on the greasemonkey forums so hopefully I can get some needed help here. My goal with a script I am writing is to remove signatures from a forum I am a part of. Some of the people abuse it with half a page of stuff and it's out of control. So here is what the HTML source code for it looks like Code: <table cellSpacing="1" width="100%" border="0" class="tback" cellPadding="2"> <tr> <td width="100" class="headcell">Author</td> <td class="headcell">Topic</td> </tr> <tr vAlign="top" class="cell"> <td align="center"> <div><a href="profile.asp?$sid=&id=5126">Roadwildcat</a></div> <div class="fcaption">Pee Wee League</div><br><div><img src="images/stars-2.gif" alt="2 Stars"></div><br><img src="Avatars/Georgia.gif" alt="Member Avatar" height="62" width="62"><div class="fcaption">DC Georgia 2020 to Present</div> <div class="fcaption">115 Posts</div> </td> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td><span class="fcaption"><img src="images/oPost.gif" alt="Old Post" height="10" width="10" border="0" align="absmiddle">Posted - 03 January 2011 5:41</span></td> <td align="right"><a href="myForum.asp?$sid=&mode=compose&to=5126"><img src="images/pm.gif" width="33" height="18" border="0" hspace="3" align="absmiddle" alt="Send Roadwildcat a Private Message"></a><a href="post.asp?$sid=&mode=Quote&id=24958&fid=2&t=24958&fpage=1"><img hspace="3" alt="Reply With Quote" src="images/quote.gif" width="28" height="18" align="absmiddle" border="0"></a></td> </tr> </table> <hr size="1" noshade>I have been trying to set my attendance to the all star games but when I do a game search on the map it is showing no games at all. Anyone else having this problem?<hr size="1"><span class="fcaption">SEC Champions 2022-2027 <br/> National Runner-up 2027 <br/> Recruiting BEAST! <br/> BULLDAWG BOUNCE</span></td> </tr> The very bottom where it has the 'span' tag and it says "SEC Champions" is where the Signatures are located. I want to completely remove that using my script and this is what I have right now Code:
function sigRemove() {
var sigs = document.getElementsByTagName('span');
for (var i = 0; i < sigs.length; i++) {
sigs[i].style.display = 'none';
}
}
I know it's incomplete but I only want to remove that bottom span tag and everything inside of it and not every span tag on the page. Please help and I apologize for the long post Hi guys, I am working with a plugin calld Hashslider which is a fairly simple div slider. Here is the code for startrs Code: // hashslider v0.9 by manuel huegel, copyright 2010
// mgoys.com
$(document).ready(function(){
//get width and height of the wrapper and give it to the UL
var wrapperwidth = $('#slider').width() * $('#slider ul > li').size();
$('#slider ul').css('width', wrapperwidth);
var wrapperheight = $('#slider').height();
$('#slider ul').css('height', wrapperheight);
//set my li width
var width = $('#slider').width();
$('#slider ul li').css('width', width);
//set my counter vars
var counter = $('#slider ul > li').size();
var decount = 1;
var autocount = 1;
//create my number navigation
var createNum = 1;
$('#numbers li:first-child').html(createNum).addClass('activenum').attr('id', 'id1');
while ( createNum != counter) {
$('#numbers li:last-child').after('<li> </li>');
createNum++;
$('#numbers li:last-child').html(createNum);
$('#numbers li:last-child').attr('id', 'id' + createNum);
}
//get my number-width (number navigation should always be centered)
var numwidth = $('#numbers li:first-child').width() * $('#numbers li').size();
$('#numbers').css('width', numwidth);
//slide the button to the next item
function goNext() {
if ( decount != counter) {
$('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
$('.activenum').removeClass('activenum').next().addClass('activenum');
decount++;
window.location.hash = decount;
}
}
function goBack() {
if ( decount != 1) {
$('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
$('.activenum').removeClass('activenum').prev().addClass('activenum');
decount--;
window.location.hash = decount;
}
}
//make the number clickable
$("#numbers li").click(function() {
//$('#info4').html( $(this).html() );
var clickednum = $(this).html() * - $('#slider').width() + $('#slider').width();
//$('#info4').html( clickednum );
$('#slider ul').animate({ left: clickednum }, 400, 'swing', function() { });
$('.activenum').removeClass('activenum');
$(this).addClass('activenum');
decount = $(this).html();
window.location.hash = $(this).html();
});
//thaths the hash-shizzle
if ( window.location.hash != '') {
//get hash, scroll to position
var hashnum = window.location.hash.substr(1) * - $('#slider').width() + $('#slider').width();
$('#slider ul').animate({ left: hashnum }, 0, function() { });
//set counters to position
decount = window.location.hash.substr(1);
$('.activenum').removeClass('activenum');
var hashname = window.location.hash.substr(1);
$('#id' + hashname).addClass('activenum');
}
//get my clickers
$("#right").click(function() { goNext(); });
$("#left").click(function() { goBack(); });
//get mousewheel function
$("#slider ul").mousewheel(function(event, delta) { if (delta > 0) { goBack(); event.stopPropagation();event.preventDefault(); } });
$("#slider ul").mousewheel(function(event, delta) { if (delta < 0) { goNext(); event.stopPropagation();event.preventDefault(); } });
});
As you will see the current code loops through all of the slides, and when it reaches the last (or first) the previous and next links become unclickable. I would like to go a stage further than this and make them dissapear entirely. I don't know how to do this or even to start, I dont even know what function to edit. Please help guys. Thanks in advance Dan Dear All, please i want to create content image rotator with thumbs image horizontal and starts automatically.you can understand more when you see http://maktoob.yahoo.com/?p=us many thanks for your efforts I realy did not mean over image I ment some like "text"<br> then image here there are 4 parts to this script. I am trying to change it so that there is text content over the image. part 1 Code: meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href='slideshow1.css' type="text/css" />
<script type="text/javascript" src="xfade2.js"></script>
<div id="rotator">
AD One<a href="$siteurl/index.pl" onmouseover=\"Tip('<img src="/upload/3282.jpg" width="300">')\" onmouseout=\"UnTip()\"><img src="imageone.jpg" width="120" height="90" border="0" alt="2 bed/1 bath House" /></a>
Ad TWO1<a href="$siteurl/index.pl" onmouseover=\"Tip('<img src="/upload/2485.jpg" width="300">')\" onmouseout=\"UnTip()\"><img src="imagetwo.jpg" width="120" height="90" border="0" alt="CSS Beauty" /></a>
</div>
the "AD ONE" and "AD two" Content above is what I would like to show up over the image and roate with it. I think I just need to change something in part 4 of the code but not sure were. part two slideshow1.css Code: *
{
margin: 0;
padding: 0;
}
#rotator
{
border: 1px solid #000;
cursor: pointer;
overflow: hidden;
margin: 50px auto 10px;
position: relative;
width: 120px;
height: 90px;
}
#rotator img
{
border: 0;
cursor: pointer;
width: 120px;
height: 90px;
}
p
{
text-align: center;
}
part 3 slideshow2.css Code: #rotator img
{
display: none;
position: absolute;
top: 0;
left: 0;
}
part 4 xfade2.js Code: /*
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
Rewrite of old code found he http://slayeroffice.com/code/imageCrossFade/index.html
*/
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init()
{
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else
{
setTimeout(so_xfade,50);
}
function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
Hi, Well this plugin stops working after completely loading the flash content or game. I did a few changes to it but still, it won't show the game after completely loading the flash. Can someone tell me what's wrong? Here is the link to live working example http://files.cryoffalcon.com/Piecema...s/testing.html I work for a certain print and online publication. The one problem we have is other sites copying ad pasting our content to thier own websites or blogs. Wondering if theirs some way to allow a user to only to be able to copy/paste a certain character limit and then somehow add link to copied and pasted blurb? Maybe theirs a way to use javascript to command notepad to only allow a set number of characters.... Maybe theirs a service available or should be. I want to create several pages (they can be text or html) with basic informatons for css formatting. example: <div class="appname" name: this app <div class="appdetails"> Version: 1.0 Date: 1/1/2011 Description: this is an app </div> </div> I want to be able to save several of these and load them into a web page where they are formatted and displayed. This needs to be a client side solution so that I can be able to access this offline. Any suggestions? Edit: so far I have tried this but I am not sure about it. <object type="text/html" data="app1.html"> I am creating a testimonials page on a customers site, and I am wanting it to be like a scrolling content. I have the border created, and I want to have text inside the border that will scroll sideways displaying a new one every 10 seconds or so, but having the ability to move between the content. Can anyone tell me what sort of script I should use? I've seen something like it before, but I've had a mind blank. I know it's some kind of Java scripting. Any ideas? Thanks in advance |
|||||||