|
JavaScript - Need Help Getting Applying A Click Event
Hi All,
I have a page which i am setting up for my local football team, and the javascript part of the page which is a 'news' rotator which i need to ammend. at the moment the tabs on the right of the 'news' rotator are linked to a certain page but nothing happens when you click on them? and i dont know enough javascript to ammend my code to make it so that it send the user to the linked page here is my js file Code: /*
* faded 0.3.1 - jQuery plugin
* written by Nathan Searles
* http://nathansearles.com/faded/
*
* Copyright (c) 2009 Nathan Searles (http://nathansearles.com/)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
* Compatible with jQuery 1.3.2+
*
*/
if(typeof jQuery != "undefined") {
jQuery(function($) {
$.fn.extend({
faded: function(options) {
var settings = $.extend({}, $.fn.faded.defaults, options);
return this.each(
function() {
if($.fn.jquery < "1.3.1") {return;}
var $t = $(this);
var $c = $t.children(":nth-child(1)");
var o = $.metadata ? $.extend({}, settings, $t.metadata()) : settings;
var total = $c.children().size();
var next = 0, prev = 0, number = 0, currentitem = 0, restart = 0, restartinterval = 0;
var loaded,active,imgSrc,clicked,current;
if (o.random) {
$.fn.reorder = function(callback) {
function randOrd() { return(Math.round(Math.random())-0.5); }
return($(this).each(function() {
var $this = $(this);
var $children = $this.children();
var childCount = $children.length;
if (childCount > 1) {
$children.hide();
var indices = new Array();
for (i=0;i<childCount;i++) { indices[indices.length] = i; }
indices = indices.sort(randOrd);
$.each(indices,function(j,k) {
var $child = $children.eq(k);
var $clone = $child.clone(true);
$clone.show().appendTo($this);
if (callback !== undefined) {
callback($child, $clone);
}
$child.remove();
});
}
}));
};
$c.reorder();
}
function pause() {
clearInterval(autoplay);
clearTimeout(restart);
restart = setTimeout(function() {
autoplay = setInterval(function(){
animate("next");
},o.autoplay);
},o.autorestart);
}
$c.css({position:"relative"});
$c.children().css({
position:"absolute",
top: 0,
left: 0,
zIndex: 0,
display:"none"
});
if (o.autoheight) {
$c.animate({height: $c.children(":eq(0)").outerHeight()},o.autoheight);
}
if (o.pagination) {
if (o.autopagination) {
$t.append("<ul class="+o.pagination+"></ul>");
$c.children().each(function(){
$("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>");
number++;
});
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current");
$("."+o.pagination+" li a",$t).click(function(){
current = $("."+o.pagination+" li.current a",$t).attr("rel");
clicked = $(this).attr("rel");
if (current != clicked) {animate("pagination",clicked,current);}
if(o.autoplay){pause();}
return false;
});
}
if (o.sequentialloading&&$c.children()[0].tagName=="IMG") {
$c.css({background:"url("+o.loadingimg+") no-repeat 50% 50%"});
imgSrc = $("img:eq(0)",$c).attr("src");
$("img:eq(0)",$c).attr("src", imgSrc).load(function() {
$(this).fadeIn(o.speed,function(){
loaded = true;
});
});
} else {
$c.find(":eq(0)").fadeIn(o.speed,function(){
loaded = true;
});
}
if (o.bigtarget) {
$c.css({"cursor":"pointer"});
$c.click(function(){
animate("next");
if(o.autoplay){
if (o.autorestart) {
pause();
} else {
clearInterval(autoplay);
}
}
return false;
});
}
if (o.autoplay) {
autoplay = setInterval(function(){
animate("next");
},o.autoplay);
pause();
}
$("."+o.nextbtn,$t).click(function(){
animate("next");
if(o.autoplay){
if (o.autorestart) {
pause();
} else {
clearInterval(autoplay);
}
}
return false;
});
$("."+o.prevbtn,$t).click(function(){
animate("prev");
if(o.autoplay){
if (o.autorestart) {
pause();
} else {
clearInterval(autoplay);
}
}
return false;
});
function animate(dir,clicked,current){
if (!active&&loaded) {
active=true;
switch(dir) {
case "next":
prev = next;
next = currentitem*1+1;
if (total === next) { next = 0; }
break;
case "prev":
prev = next;
next = currentitem*1-1;
if (next === -1) { next = total-1; }
break;
case "pagination":
next = clicked;
prev = current;
break;
}
if (o.pagination) {
$(".pagination li.current",$t).removeClass("current");
$(".pagination li a:eq("+next+")",$t).parent().addClass("current");
}
if (o.crossfade) {
$c.children(":eq("+next+")").css({zIndex:10}).fadeIn(o.speed,function(){
$c.children(":eq("+prev+")").css({display:"none",zIndex:0});
$(this).css({zIndex:0});
currentitem = next;
active = false;
});
} else {
$c.children(":eq("+prev+")").fadeOut(o.speed,function(){
if (o.autoheight) {
$c.animate({height: $c.children(":eq("+next+")").outerHeight()},o.autoheight,function(){
$c.children(":eq("+next+")").fadeIn(o.speed);
});
} else {
$c.children(":eq("+next+")").fadeIn(o.speed);
}
currentitem = next;
active = false;
});
}
}
}
}
);
}
});
$.fn.faded.defaults = {
speed: 300,
crossfade: false,
bigtarget: false,
sequentialloading: false,
autoheight: false,
pagination: "pagination",
autopagination: true,
nextbtn: "next",
prevbtn: "prev",
loadingimg: false,
autoplay: false,
autorestart: false,
random: false
};
});
}
not sure why it wont load the url when clicked apon? can anyone please help? many thanks Luke Similar TutorialsHai all, iam trying to use java script code in my jsp page. i used a onclick event.while clicking on the button that wil goes to the javascript function(deleteRecord(name,subject)). this deleterecord() wil post the url request. my code is like this ----------------- function deleteRecord(name,subject){ document.write("name received is:"+name); f.method="post"; var url="http://localhost/myproject/DeleteRecord?"; var url1= "name="+name; var url2="subject="+subject; var URL=url+url1+url2; f.action(URL); f.submit(); } my onclickevent code is' <td width="20%" height="25" align="left" valign="middle"><input type="submit" name="delete" value="Delete" style="background-color:#ff0000;font-weight:bold;color:#ffffff;" onclick="deleteRecord(<%=rs.getString("name")%>,<%=rs.getString("subject")%>);" /></td> --------------------------------------------- wil iam running my jsp page internet explorer is giving in variable subject (error:'divi' is invalid).divi is the value of the parameter name which iam passing to the function . and mozilla firefox my script is not working there is some syntax issues as wel as browser issues...and with url syntax can any one help me... Regards, Divya Hey guys! How can i simulate a click event? Like a real mouse click. and a keyboard click event? Dear Friends, I am breaking my head over this since yesterday. Can anyone help me with a javascript which can be used to replace the inner text (count of downloads) with new text based on how many people save my image using Right-Click Save Image As option. Thank you PS: Without database support. Code: <table border="0" cellspacing="1" cellpadding="1" width="200">
<tbody>
<tr>
<td><img border="0" id="s1" alt="" src="s1.gif" /></td>
<td><img border="0" id="s2" alt="" src="s2.gif" /></td>
</tr>
<tr>
<td style="text-align: center">7 Download(s)</td>
<td style="text-align: center">1 Download(s)</td>
</tr>
<tr>
<td><img border="0" id="s3" alt="" src="s3.gif" /></td>
<td><img border="0" id="s4" alt="" src="s4.gif" /></td>
</tr>
<tr>
<td style="text-align: center">0 Download(s)</td>
<td style="text-align: center">10 Download(s)</td>
</tr>
</tbody>
</table>
Hi all ... Any help's appreciated ... The challenge is that I have three - three page sliders ... each one is actually being called on a list item external to the easySlider function ...(#sliderNav ul li a#s1, #s2, #s3) When I navigate from one slide show to the next ... I need to send a callback to rewind each slideshow to the first page and reflect the current change to the numeric 'a' attr ... I don't quite know how to properly structure a callback function to update the current list item index from within the click event ... Any suggestions would KINDLY be appreciated cause I think I'm a bit over my JavaScript - JQuery skills threshold with this ... Thanks in advance and if you are way too busy to assist I completely understand ... Here's the code I have for my slideshow controller .. Code: $(function()
{ // Slider Init Functions ....
$("#slideShow").easySlider({
controlsShow:true,
speed:100,
numeric:true,
numericId:'controls',
className:"sone",
firstId:'p1'
});
$('.stwo, .sthree').hide();
$('.sone').show();
$('#slideShowTwo').easySlider({
controlsShow:true,
speed:100,
numeric:true,
numericId:'controlsTwo',
className:'stwo',
firstId:'p4'
});
$('#slideShowThree').easySlider({
controlsShow:true,
speed:100,
numeric:true,
numericId:'controlsThree',
className:'sthree',
firstId:'p7'
});
// Slider Nav Calls ...
$('#s1').click(function() {
$('.sone').show();
$('.stwo, .sthree').hide();
});
$('#s2').click(function() {
$('.stwo').show();
$('.sone, .sthree').hide();
});
$('#s3').click(function() {
$('.sthree').show();
$('.sone, .stwo').hide();
});
});
And the code for the easySlider .... Code: (function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefo '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls',
className:''
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'" class="' + options.className + '"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.attr('class',options.className)
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#" + options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent (t);
};
function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
t = parseInt(t);
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(options.numeric) setCurrent(0);
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);
The HTML Code: <div id="sliderNav"> <ul> <li><a href="#p1" id="s1">One</a></li> <li><a href="#p4" id="s2">Two</a></li> <li><a href="#p7" id="s3">Three</a></li> </ul> </div> <div id="slideShow" class="sone"> <ul> <li id="p1"><!--<li>Slide One</li>--> <div class="h2">This is The Main Page</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p2"> <div class="h2">This is Page Two</div> Here's the second portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p3"> <div class="h2">This is Page Three</div> Here's the third portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> </ul> </div><!-- </div id="slideShow">--> <div id="slideShowTwo" class="stwo"> <ul> <li id="p4"><!--<li>Slide Two</li>--> <div class="h2">This is Slideshow 2 Page One</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p5"> <div class="h2">This is Slideshow 2 Page Two</div> Here's the second portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p6"> <div class="h2">This is Slideshow 2 Page Three</div> Here's the third portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</li> </ul> </div><!-- </div id="slideShowTwo">--> <div id="slideShowThree" class="sthree"> <ul> <li id="p7"><!--<li>Slide Three</li>--> <div class="h2">This is Slideshow 3 Page One</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p8"> <div class="h2">This is Slideshow 3 Page Two</div> Here's the second portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p9"> <div class="h2">This is Slideshow 3 Page Three</div> Here's the third portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> </ul> </div><!-- </div id="slideShowThree">--> </body> Hi forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
element.setAttribute('id', 'myBtn');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
EventUtil.addHandler(element, 'click', function() {
alert('event attached');
});
var flag = confirm('prevent default behavior of button?');
if (flag) {
var el = document.getElementById('myBtn');/////////////////////////(1)
var ev = el.onclick;
}
}
var EventUtil = {
addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
}
};
But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though. How can retrieve the clientX and clientY in ondrag event? Hi, i try to do that every char that i type in a input-type there will be a alert, but it doesnt do that, when the page loads it pop ups one time an alert and it doesnt pop up more alerts when i type something in the input-type Sorry for the bad english here is my code Code: <script type="text/javascript">
function init()
{
document.Form1.phone.onkeyup= alert('a');
}
window.onload=init;
</script>
I'm designing a page that uses javascript+css for enhanced interaction. However, if javascript is disabled, I'd still like the page to be functional, albeit less fancy. Likewise, if css is disabled, it still needs to be functional. Finally, if both js+css are disabled, the page will be quite bare but still usable. For example, I use javascript to set a css style that hides certain panels of content. JS is used to toggle these and all is fine. If JS is disabled, then the css isn't applied, and all the content is visible (though not too pretty). If CSS is disabled, the inline CSS applied by the JS works fine. Finally, if both are disabled, all the content is visible. I'm wondering what's the best way to do this. Currently, I set the styles like this in the js file: Code: function initialize() {
// set styles, for example:
document.getElementById("panel").style.display = "none";
}
var onloadFlag = false;
document.onreadystatechange = function() {
if (!onloadFlag) {
onloadFlag = true;
initialize();
}
};
// for older browsers
window.onload = function() {
if (!onloadFlag) {
onloadFlag = true;
initialize();
}
};
The problem that sometimes comes up is I see the "fallback" styles briefly, before the JS kicks in and applies the enhanced css. How can I avoid this? Could you please help. I came up with javascript functions that would apply a style sheet to an xml document during the runtime but i get the following error: Automation server cannot create object. Below is the code (javascript): <html> <head> <title>SORT</title> <head> <body bgcolor="#FFFFFF"> <form name="VIEW" method="post" action> <p> <input type="text"> </p> <p> <input type="radio" name="optAscending" value="radiobutton" onClick="javascript:displayAscending();">Ascending </p> <p> <input type="radio" name="optDescending" value="radiobutton" onClick="javascript:displayDescending();">Descending <p> <input type="radio" name="optReset" value="radiobutton" onClick="javascript:displayReset();">Reset </p> </form> </body> <script language="javascript"> function displayAscending() { document.VIEW.optDescending.checked=false; document.VIEW.optReset.checked=false; var xsltobj = new ActiveXObject("Msxml2.XSLTemplate.4.0"); var xsldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0"); var xslprocobj; xsldocobj.async = false; xsldocobj.load("EMP.xsl"); xsltobj.stylesheet = xsldocobj; var xmldocobj = new ActiveXObject("Msxml2.FreeThreadDOMDocument.4.0"); xmldocobj.async = false; xmldocobj.load("EMP.xml"); xslprocobj = xslt.createProcessor(); xslprocobj.input = xmldocobj; xslprocobj.Transform(); //arlet(xslProc.output); parent.FIRST.document.write(xslProc.output); } function displayDescending() { document.VIEW.optAscending.checked=false; document.VIEW.optReset.checked=false; var xsltobj = new ActiveXObject("Msxml2.XSLTemplate.4.0"); var xsldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0"); var xslprocobj; xsldocobj.async = false; xsldocobj.load("EMP.xsl"); var xmldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0"); xmldocobj.async = true; xmldocobj.load("EMP.xml"); xsltobj.stylesheet = xsldocobj; xslprocobj = xslt.createProcessor(); xslprocobj.input = xmldocobj; xslprocobj.Transform(); //arlet(xslProc.output); parent.FIRST.document.write(xslProc.output); } function displayReset() { parent.First.document.location="first.htm"; document.VIEW.optAscending.checked=false; document.VIEW.optDescending.checked=false; } </script> </html> And a style sheet that would be applied to an xml document <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <html> <body> <table border="2" bgcolor="blue"> <tr> <th>ID</th> <th>NAME</th> <th>DESIGNATION</th> <th>ADDRESS</th> <th>DOB</th> <th>DEPARTMENTS</th> </tr> <xsl:for-each select="EMPDETAILS/EMPLOYEE"> <tr> <td><xsl:value-of select="ID"/></td> <td><xsl:value-of select="NAME"/></td> <td><xsl:value-of select="DESIGNATION"/></td> <td> <xsl:value-of select="ADDRESS/Street"/> <xsl:value-of select="ADDRESS/Apartment"/> <xsl:value-of select="ADDRESS/City"/> <xsl:value-of select="ADDRESS/State"/> <xsl:value-of select="ADDRESS/Zipcode"/> </td> <td><xsl:value-of select="DOB"/></td> <td><xsl:value-of select="DEPARTMENT"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> I have some javascript which applies alternative row colors to a table and also gives you a highlight effect when you mouseover the rows. However, the problem I have is that it applies to every table on my page, I only want it to apply to a specific table in the html file (I'm using frontpage), not all of them How would I go about doing this? The code is below, it has a bit of styling at the top before the javascript. <style type="text/css" media="all"> table.altsrowtable { width: 90%; margin: auto; border-collapse: collapse} td { border: 1px solid black; cursorointer;text-align:center} /* row 1 */ tr td { background: #edf3fe; } tr:hover td, tr.ie td { background: #e1e1ff; } /* row 2 */ tr.bis td { background: #D9ECFF; } tr.bis:hover td, tr.bisie td { background: #e1e1ff; } /* selected row 1 */ tr.sel:hover td, tr.selie td { background: #edf3fe; } /* selected row 2 */ tr.selbis:hover td, tr.selbisie td { background: #D9ECFF; } </style> <script type="text/javascript" span="altsrowtables" div="altsrowtable" id="altsrowtable" class="altsrowtable"> var IE = false; /*@cc_on IE=true; @*/ var r; function setRows(){ r = document.getElementsByTagName('TR'); for(var i=0;i<r.length;i++) r[i].className = (i/2 != Math.round(i/2))? '':'bis'; } function selectRow(aRow,add){ var c = aRow.className; if(add) setRows(); var b = aRow.className; if(IE) aRow.className = b==''? 'selie' : b=='bis'? 'selbisie' : c=='selie'? 'ie' : c=='ie'? 'selie' : c=='bisie'? 'selbisie' : c=='selbisie'? 'bisie' : ''; else aRow.className = b==''||c==''? 'sel' : b=='bis'||c=='bis'? 'selbis' : c=='selbis'? 'bis' : ''; } // roll-over (only for IE) function roll(what) { var c = what.className; what.className = c==''? 'ie' : c=='bis'? 'bisie' : c=='bisie'? 'bis' : c=='selbis'? 'selbisie' : c=='selbisie'? 'selbis' : c=='selie'? 'sel' : c=='sel'? 'selie' : ''; } // fire on loading onload= function() { setRows(); for(var i=0;i<r.length;i++) { if(IE) { r[i].onmouseover = function(){ roll(this); } r[i].onmouseout = function(){ roll(this); } } } } </script> <style type="text/css"> table.altrowstable { font-family: calibri; font-size:11px; color:#333333; border-width: 1px; border-color: #C0C0C0; border-collapse: collapse; } table.altrowstable th { border-width: 1px; "background-image:url('QP Header.png');" border-style: solid; border-color: #C0C0C0; font-size:12px; font-style:bold; } table.altrowstable td { border-width: 1px; border-style: solid; border-color: #a9c6c9; } </style> Thanks Sean Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? I'm writing a report for my college class about what it takes to get into the field of computer programming and i need to obtain information from someone who is in the position of hiring entry level computer programmers. it would Really! help me out if someone has time to fill out these questions. I know its asking for a lot but if anyone has the time it would be highly appreciated! 1. Tell me a little bit about the company? ( Main focus, how did it start, who are your customers, company growth,etc) 2. Where do you see the industry in 5 years? 3. What makes the company successful? 4. What are you looking for in a potential candidate? 5. When interviewing a potential employee, what questions do you expect them to ask you? 6. How could a typical day on the job be described? How much variety is there on a day-to-day basis? 7. When you look at resume, what is your main focus in terms of order and importance, reference? 8. How do you feel about networking as a tool to research potential candidates? (ex. LinkedIN, Facebook?) 9. What education, experience and qualifications are need to enter the field as entry level position? 10. What is the salary range and job responsibilities? 11. What is best liked and least liked about this field / job? 12. What is a typical interview in this field? How is it different then regular interviews? 13. Is there a demand for people in this field? 14. What special advice could you give a person entering the field? 15. What types of training do companies offer persons entering this field? 16. Which professional journals and organizations would help me learn more about this field? 17. How can a new graduate obtain experience in the field? How and where can one get internship? 18. What types of technologies and software is used in the field? 19. Would you have any more information that will be of use to me? 20. Can you suggest others who may be valuable sources of information? Hey guys just need a little help. I need to create a little script that clicks a link automatically and opens it up in a new page. So far I have this: Code: <head>
<script>
function autoClick(){
document.getElementById('linkToClick').click();
}
</head>
<body onload="setTimeout('autoClick();',3000);">
<a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a>
</body>
It works but the problem is that IE popup blocker keeps blocking the new window. Is there a way to do the same thing with javascript without it having blocked by IE popup blocker? need to make "left click" act as "middle click" -------------------------------------------------------------------------------- I need to make "left click" act as "middle click" for a web site ....thank you in advance for any and all help... [CODE] <script language="javascript"> function Click(4) { if (event.button==0; 1; ) } document.onmousedown </script>> Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser I am looking to add a calendar to my website in order to list events for each day on the calendar you click on. For example, the link below shows a calendar on the left, that when you click on a day it lists all the events that day. I have done a few searches, but am not sure if I can find a calendar that acts like this... Calendar Example Any help would be greatly appreciated! Hey guys, I had a client ask me to frankenstein two HTML5 themes together to achieve having both a countdown clock and snow effect on a "coming soon" page. You can see it he EXSAPIEN - A New Graphic Novel The problem I'm having now is that the social media buttons are not clickable (The links work on my iPhone, but not on my laptop.) I have been able to EITHER display the snow, OR make the links work, but not both at the same time. This code seems to be the piece that is making the difference (specifically, the Code: event.preventDefault(); toward the end): Code:
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
for (var i = 0; i < 500; i++) {
particle = new Particle3D( material);
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = 1;
scene.add( particle );
particles.push(particle);
}
container.appendChild( renderer.domElement );
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
{
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'touchstart', onDocumentTouchStart, false );
document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
}
else if( userAgent.match( /Android/i ) )
{
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'touchstart', onDocumentTouchStart, false );
document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
}
else
{
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}
setInterval( loop, 1000 / 60 );
$('canvas').parent().addClass('snow');
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
I learned jscript back in 1999, so with all the new technology, multi-touch etc, that has come about in the meantime, I am effectively a n00b again. :/ Please help! What can I do here that will allow the snow effect to run while still keeping the social media links clickable?? Is there any other code I can provide that would be useful in solving the problem? Thank you!! I have a asp:textbox where I'd like to capture when the user hits Enter, and then instead of doing whatever it normally would, then it should call a javascript function. I'm not sure how to do that, other than I suppose I should use the OnTextChanged event. But I'm not sure which parameters are sent with the event... Thanks in advance |
|||||||