|
JavaScript - Two Jquery Scripts Doesn't Work Together
Hello,
I'm trying to combine two different jQuery scripts on my webpage. The one is showing flashvideos in a lightbox and the other one is displaying thumbnails in a slideshow. The problem is that only one script is working. I have searched the web and forums and found that several people have had this problem before and I have truly tried to fix it with noConflict(). The problem is that I have very little experience in Javascript so I haven't got it working. So, here are the lines in the code: <!-- Video lightbox --> <script type="text/javascript" src="/js/videolightbox/mootools.js"></script> <script type="text/javascript" src="/js/videolightbox/swfobject.js"></script> <script type="text/javascript" src="/js/videolightbox/videobox.js"></script> <!-- Thumbnail slider --> <script type="text/javascript" src="/js/jquery-1.2.6.js"></script> <script type="text/javascript" src="/js/carousel.js"></script> I haven't coded any of these myself (of course), so I am not familiar with the variables in the files. So my target is to find a way to to use these scripts simultaneously. I am very thankful for your help but I am also kindly asking for a simple and easy to understand instruction. The webpage can be found he http://wearethemusicmakers.se/index2.php Best Regards Johannes Similar TutorialsThis is puzzling me. It's an incremental search function. Any help for a Javascript novice much appreciated: Code: $(function () {
$('#quickFilter').incrementalFilter({
items: 'dl.entryList > dt',
foundCounter: '#resultCount',
totalCounter: '#totalCounter',
minChars: 2
}).focus();
})
... here's the rest of it: Code: (function($) {
var IncrementalFilter = function(params){
var setting = this.setting = {
input: undefined,
items: undefined,
searchScope: '*',
minChars: 2,
useHighlight: true,
foundCounter: undefined,
totalCounter: undefined,
highlightElem: $('<em class="highlight" />'),
foundClass: 'found',
zeroClass: 'zero'
}
$.extend(setting,params)
this.input = $(setting.input);
this.items = $(setting.items);
this.minChars = setting.minChars;
if(setting.foundCounter){
this.totalCounter = setting.totalCounter;
this.foundCounter = new IncrementalFilter.Counter(setting);
}
this.formerQuery = '';
this.itemData = [];
this.init();
}
IncrementalFilter.prototype = {
makeData: function(){
var that = this;
this.items.each(function(){
var obj = [$(this)]
if($(this).is('dt')){
obj.push($(this).next())
}
that.itemData.push(new IncrementalFilter.SearchedItem(obj,that.setting));
})
if(this.foundCounter){
this.foundCounter.refresh(this.itemData.length);
if(this.totalCounter){
$(this.totalCounter).html(this.foundCounter.all)
}
}
},
processQuery: function(query){
var tempq = this.escapeQuery(query)
tempq = $.trim(tempq).split(/\s+/);
var queries = []
for(var i=0,l=tempq.length;i<l;i++){
for(var j=0,m=tempq.length;j<m;j++){
if(i!=j && tempq[i] && (tempq[i] == tempq[j]
|| RegExp(tempq[i]).test(tempq[j])
|| tempq[i].length < this.minChars)){
tempq.splice(i,1)
l = m = tempq.length;
}
}
if(tempq[i]){
queries.push(tempq[i])
}
}
if(queries.join(' ') != this.formerQuery){
this.search(queries);
this.formerQuery = queries.join(' ');
}
},
escapeQuery: function(query){
var escapeChars = '.+*^$?()[]{}';
var res = query;
for(var i=0,l=escapeChars.length;i<l;i++){
var ec = escapeChars.charAt(i);
res = res.replace(RegExp('\\'+ec,'g'),'\\'+ec);
}
return res;
},
search: function(queries){
var that = this;
var count = 0;
$(that.itemData).each(function(){
var self = this;
var matchCount = 0;
$.each(queries,function(){
if(RegExp(this,'i').test(self.text))
matchCount++;
})
if(matchCount == queries.length){
this.showItem()
this.clearHighlight(function(){
$.each(queries,function(){
self.highlightWord(this)
})
});
count++;
}else{
this.hideItem();
}
})
if(this.foundCounter){
this.foundCounter.refresh(count)
}
},
reset: function(){
var that = this;
$(this.itemData).each(function(){
this.showItem();
this.clearHighlight();
if(that.foundCounter){
that.foundCounter.reset();
}
})
},
setEvent: function(){
var that = this;
this.input.bind('keyup',function(){
var val = $(this).val();
if(val.length >= that.minChars){
that.processQuery(val)
}else{
that.reset();
}
})
},
init: function(){
this.makeData();
this.setEvent();
if(this.input.val().length >= this.minChars){
this.processQuery(this.input.val())
}
}
}
/**
*@param obj {array}
**/
IncrementalFilter.SearchedItem = function(obj,setting){
this.useHighlight = (setting.useHighlight && $.fn.highlightText && $.fn.removeOuterTag)
if(this.useHighlight){
this.highlightElem = setting.highlightElem || $('<em class="highlight" />');
this.highlightExpr = /^<(\w+)/.exec($('<div />').append(this.highlightElem).html())[1]
+ '.'+this.highlightElem.attr('class').split(/\s/).join('.');
}
this.text = '';
this.obj = [];
for(var i=0,l=obj.length;i<l;i++){
var temp = obj[i];
this.obj[i] = {'elem':temp,'orgsrc':temp.html()}
this.text += obj[i].text();
}
}
IncrementalFilter.SearchedItem.prototype = {
hideItem: function(){
$(this.obj).each(function(){
this.elem.hide();
})
return this;
},
showItem: function(){
$(this.obj).each(function(){
this.elem.show();
})
return this;
},
clearHighlight: function(callback){
if(!this.useHighlight) return this;
var that = this;
$(this.obj).each(function(){
$(that.highlightExpr,this.elem).removeOuterTag()
})
if(callback) callback();
return this;
},
highlightWord: function(word){
if(!this.useHighlight) return this;
var that = this;
var query = new RegExp(word,'gi')
$(this.obj).each(function(){
this.elem.highlightText(query,that.highlightElem)
})
return this;
}
}
IncrementalFilter.Counter = function(setting){
if(!setting || !setting.foundCounter) return undefined;
this.obj = $(setting.foundCounter);
this.foundClass = setting.foundClass || 'found';
this.zeroClass = setting.zeroClass || 'zero';
this.all = undefined;
this.refresh = function(count){
this.obj.html(count);
if(!this.all){
this.all = count;
}
if(count == 0){
this.zero()
}else if(count < this.all){
this.highlight();
}
}
this.reset = function(){
this.refresh(this.all);
this.obj
.removeClass(this.foundClass)
.removeClass(this.zeroClass)
}
this.highlight = function(){
this.obj
.removeClass(this.zeroClass)
.addClass(this.foundClass)
}
this.zero = function(){
this.obj
.removeClass(this.foundClass)
.addClass(this.zeroClass)
}
return this;
}
$.fn.incrementalFilter = function(params){
return this.each(function(){
if(typeof params == 'string' || params.size){
new IncrementalFilter({input:$(this),items:params})
}else if(typeof params == 'object'){
params.input = $(this);
new IncrementalFilter(params)
}
});
};
well the jquery is working fine for twitter and other stuff but its not working for facebook, when i highlight the text and select fb to share at then the facebook share just show the meta description of site and not the selected area. I am not able to understand where am i going wrong, any assistance provided is highly appreciated. Go to this link http://www.blobh.com/2011/09/testing-1.html there select some text then a tooltip kind of thing will appear first share at twitter then at facebook you will understand the matter. the script i am using is this Code: <script type='text/javascript'>
$('.demo1').selectedTextSharer({
lists:"Twitter,http://twitter.com/home?status=%ts ,favicon|Facebook,http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.blobh.com%2F&t=%s,favicon|Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
extraClass: 'dark',
title: 'Share this text ...',
borderColor: '#7F241C',
background : '#4F663A',
titleColor : '#7F241C',
textColor : '#FFFFFF',
hoverColor: '#7F241C'
});
</script>
and the other script is this one http://bloghuts.googlecode.com/files...-sharer.min.js and the html is like this Code: <!-- Just wrap a text with a div and add a class, thats all ! --> <div class="demo1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div> <textarea class="demo4"></textarea> <input class="demo4" type="text" /> Hello, i am trying to put on my website two jquery scripts, but when i put both of them one works correctly and second one works but like without css. What should i do to make them both work? I tried setting the scripts in different order but it didn't work. I tested it in all browsers and IE is the only one not cooperating. <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <link rel="stylesheet" type="text/css" href="../css/norma_style.css" media="all"/> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="../css/ie7fix.css" media="all" /> <![endif]--> <script type="text/javascript" src="../css/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="../css/jquery.cycle.all.latest.js"></script> <script src="../css/kwick/kwicks1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... speed: 2000, random: 1 }); }); </script> <script type="text/javascript"> $().ready(function() { $('#example .kwicks').kwicks({ max: 500, spacing: 5 }); }); </script> </head> Hi everyone, I searched and found some answers to this question, however, after trying the solutions, none worked for me. I am hoping someone can help me figure out where i'm going wrong with this. I am trying to use the jQuery Nivo Slider and the jQuery Ad Gallery on the same page. When both scripts are active, only one works. When i comment out one of them, the other works. This happens either way i do it. I tried using the jQuery.noConflict(); but it did not work...unless i did something wrong. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/includes/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="/includes/jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
$('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
$('img.image1').data('ad-title', 'Title through $.data');
$('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
$('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function() {
if(!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:5, // Slide transition speed
pauseTime:7000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:false, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.png', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Does anyone have any ideas? I appreciate the help in advance! Tsiqueira Ok, i have a tricky one :/ I've got everything running nicely and correctly. Put my scripts and everything... One of then writes some data using the SPAN tag : <span class="simpleCart_quantity"></span>, where simplecart_quantity is a js script. I used copy&paste to put EXACTLY the same code in all pages. However in 2 specific pages the SPAN prints nothing, just empty space. The only difference between those 2 pages and the others is that they have additional scripts inside - but these scripts do different things and have no conflicts with the simplecart. I can't understand where to look to, what to change or how to deal with it... I dont even know whether to post the full pages' code since they are pretty long Please see URL: http://www.freedommd.com/Freedom10/index.shtml 1. On the navbar, click on "Demos > EMR Features" (using jQuery for the navbar) 2. On the "FreeDOM EMR" page, in addition to the jQuery navbar, I am using Lightbox to display images (click on the "dashboard" thumbnail). There is a conflict of some sort here between scripts. Code: <!--jquery menu code directly below--> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript" src="js/navmenus.js"></script> <!--end jquery nav--> <!--Lightbox code directly below--> <script type="text/javascript" src="js-lightbox/prototype.js"></script> <script type="text/javascript" src="js-lightbox/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js-lightbox/lightbox.js"></script> <!--end Lightbox --> As is, on this page, my Lightbox code works fine, but my navbar will not expand the sub menus. If I remove the Lightbox code, then the navbar works fine. I'd really like for them both to work. : ) I tried putting the .js in different directories, separating the Lightbox code from the jQuery code but that didn't help. All .js files are attached. Much appreciated if someone can tell me what I need to do. Thanks, John I'm having trouble inserting two jquery scripts into the same HTML file. they both work independently, but when i try to use them both at the same time only one script will work.. I'm using a "slider gallery" and "ez background-resize". I've read a few articles that suggest using "var jQuery_1_2_6 = $.noConflict(true);" but i just can't seem to figure it out. Any one have any thoughts or suggestions? I'd really appreciate it. Code is below. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Total City Sports</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<!-- start slider gallery-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script> <!-- end slider gallery -->
<!--start bg resize -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
$("#body-background").ezBgResize();
});
$(window).bind("resize", function(){
$("#body-background").ezBgResize();
});
</script> <!-- end bg resize-->
</head>
So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
Please delete thread Now solved
Hey I am having a problem with these 2 scripts, one is a slideshow and the other one is a twitter stream. Only one of them works. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.musikparlamentet.dk/wp-content/themes/arthemia/js/jquery.easing.1.3.js"></script>
<link rel="icon" href="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/favicon.ico" />
<link rel="shortcut icon" href="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/favicon.ico" />
<script type="text/javascript" src="http://www.musikparlamentet.dk/wp-content/themes/arthemia/js/jquery.jtweetsanywhere-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.musikparlamentet.dk/wp-content/themes/arthemia/js/jquery.jtweetsanywhere-1.2.1.css" />
<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=APIKey&v=1"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tweetFeed').jTweetsAnywhere({
username: 'Musikparlament',
count: 1,
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
var autoPlayTime=5000;
autoPlayTimer = setInterval( autoPlay, autoPlayTime);
function autoPlay(){
Slidebox('next');
}
$('#slidebox .next').click(function () {
Slidebox('next','stop');
});
$('#slidebox .previous').click(function () {
Slidebox('previous','stop');
});
var yPosition=($('#slidebox').height()-$('#slidebox .next').height())/2;
$('#slidebox .next').css('top',yPosition);
$('#slidebox .previous').css('top',yPosition);
$('#slidebox .thumbs a:first-child').removeClass('thumb').addClass('selected_thumb');
$("#slidebox .content").each(function(i){
slideboxTotalContent=i*$('#slidebox').width();
$('#slidebox .container').css("width",slideboxTotalContent+$('#slidebox').width());
});
});
function Slidebox(slideTo,autoPlay){
var animSpeed=1000; //animation speed
var easeType='easeInOutExpo'; //easing type
var sliderWidth=$('#slidebox').width();
var leftPosition=$('#slidebox .container').css("left").replace("px", "");
if( !$("#slidebox .container").is(":animated")){
if(slideTo=='next'){ //next
if(autoPlay=='stop'){
clearInterval(autoPlayTimer);
}
if(leftPosition==-slideboxTotalContent){
$('#slidebox .container').animate({left: 0}, animSpeed, easeType); //reset
$('#slidebox .thumbs a:first-child').removeClass('thumb').addClass('selected_thumb');
$('#slidebox .thumbs a:last-child').removeClass('selected_thumb').addClass('thumb');
} else {
$('#slidebox .container').animate({left: '-='+sliderWidth}, animSpeed, easeType); //next
$('#slidebox .thumbs .selected_thumb').next().removeClass('thumb').addClass('selected_thumb');
$('#slidebox .thumbs .selected_thumb').prev().removeClass('selected_thumb').addClass('thumb');
}
} else if(slideTo=='previous'){ //previous
if(autoPlay=='stop'){
clearInterval(autoPlayTimer);
}
if(leftPosition=='0'){
$('#slidebox .container').animate({left: '-'+slideboxTotalContent}, animSpeed, easeType); //reset
$('#slidebox .thumbs a:last-child').removeClass('thumb').addClass('selected_thumb');
$('#slidebox .thumbs a:first-child').removeClass('selected_thumb').addClass('thumb');
} else {
$('#slidebox .container').animate({left: '+='+sliderWidth}, animSpeed, easeType); //previous
$('#slidebox .thumbs .selected_thumb').prev().removeClass('thumb').addClass('selected_thumb');
$('#slidebox .thumbs .selected_thumb').next().removeClass('selected_thumb').addClass('thumb');
}
} else {
var slide2=(slideTo-1)*sliderWidth;
if(leftPosition!=-slide2){
clearInterval(autoPlayTimer);
$('#slidebox .container').animate({left: -slide2}, animSpeed, easeType); //go to number
$('#slidebox .thumbs .selected_thumb').removeClass('selected_thumb').addClass('thumb');
var selThumb=$('#slidebox .thumbs a').eq((slideTo-1));
selThumb.removeClass('thumb').addClass('selected_thumb');
}
}
}
}
</script>
The two scripts are a random image script and a bouncing image script. After the page loads I can see the bouncing image script working but its the "missing image" box. How can I fix this to load the images from the random script? Also, if anyone has a suggestion on how to give the bouncing images a % transparency that would be very helpful also! I think the easiest way is going to be using transparent png images instead of jpgs but I could be wrong. Anyway, the code is below.......... This is the html file: Code: <html>
<head>
<script language="JavaScript" src="dynlib.js"></script>
<script language="JavaScript" src="bouncingimages.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = '1.jpg'
theImages[1] = '2.jpg'
theImages[2] = '3.jpg'
theImages[3] = '4.jpg'
theImages[4] = '5.jpg'
theImages[5] = '6.jpg'
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('+theImages[whichImage]+');
}
// End -->
</script>
</head>
<body onLoad="javascript:loadBouncingImages();">
</body>
</html>
and this is the bouncing images js file: Code: // INITIALIZATION:
bouncingImages = new Object();
// CONFIGURATION:
bouncingImages.imgCount = 1;
bouncingImages.imgWidth = 200;
bouncingImages.imgHeight = 200;
bouncingImages.imgSrc = "showImage()";
bouncingImages.frameRate = 30;
bouncingImages.minRandomSpeed = 2;
bouncingImages.maxRandomSpeed = 8;
// MAIN:
bouncingImages.isLoaded = false;
bouncingImages.dirX = new Array();
bouncingImages.dirY = new Array();
bouncingImages.posX = new Array();
bouncingImages.posY = new Array();
bouncingImages.speedX = new Array();
bouncingImages.speedY = new Array();
var winWidth, winHeight;
if (dyn) var preloadImgObj = loadImg(bouncingImages.imgSrc);
function loadBouncingImages() {
if (dyn && !bouncingImages.isLoaded) {
winWidth = getWinWidth();
winHeight = getWinHeight();
for (var layerLoop = 0; layerLoop < bouncingImages.imgCount; layerLoop++) {
bouncingImages.dirX[layerLoop] = (Math.round(Math.random()) == 0) ? 'left' : 'right';
bouncingImages.dirY[layerLoop] = (Math.round(Math.random()) == 0) ? 'up' : 'down';
bouncingImages.posX[layerLoop] = Math.floor(Math.random() * (winWidth - bouncingImages.imgWidth - 1)) + getDocScrollLeft();
bouncingImages.posY[layerLoop] = Math.floor(Math.random() * (winHeight - bouncingImages.imgHeight - 1)) + getDocScrollTop();
bouncingImages.speedX[layerLoop] = Math.round(Math.random() * (bouncingImages.maxRandomSpeed - bouncingImages.minRandomSpeed)) + bouncingImages.minRandomSpeed;
bouncingImages.speedY[layerLoop] = Math.round(Math.random() * (bouncingImages.maxRandomSpeed - bouncingImages.minRandomSpeed)) + bouncingImages.minRandomSpeed;
var tempLayerObj = addLayer('bouncingImagesLyr' + layerLoop);
bouncingImages['layerObj' + layerLoop] = tempLayerObj;
setLayerSize(tempLayerObj,bouncingImages.imgWidth,bouncingImages.imgHeight);
setLayerClip(tempLayerObj,0,bouncingImages.imgWidth,bouncingImages.imgHeight,0);
setLayerHTML(tempLayerObj,getImgTag('bouncingImagesImg' + layerLoop,preloadImgObj.src,bouncingImages.imgWidth,bouncingImages.imgHeight,0));
moveLayerTo(tempLayerObj,bouncingImages.posX[layerLoop],bouncingImages.posY[layerLoop]);
showLayer(tempLayerObj);
}
bouncingImages.isLoaded = true;
moveBouncingImages();
}
}
function moveBouncingImages() {
for (var layerLoop = 0; layerLoop < bouncingImages.imgCount; layerLoop++) {
if (bouncingImages.dirX[layerLoop] == 'left') {
if (bouncingImages.posX[layerLoop] > bouncingImages.speedX[layerLoop]) bouncingImages.posX[layerLoop] -= bouncingImages.speedX[layerLoop];
else {
bouncingImages.dirX[layerLoop] = 'right';
bouncingImages.posX[layerLoop] = 0;
}
}
else if (bouncingImages.dirX[layerLoop] == 'right') {
if (bouncingImages.posX[layerLoop] + bouncingImages.imgWidth < winWidth - bouncingImages.speedX[layerLoop]) bouncingImages.posX[layerLoop] += bouncingImages.speedX[layerLoop];
else {
bouncingImages.dirX[layerLoop] = 'left';
bouncingImages.posX[layerLoop] = winWidth - bouncingImages.imgWidth;
}
}
if (bouncingImages.dirY[layerLoop] == 'up') {
if (bouncingImages.posY[layerLoop] > bouncingImages.speedY[layerLoop]) bouncingImages.posY[layerLoop] -= bouncingImages.speedY[layerLoop];
else {
bouncingImages.dirY[layerLoop] = 'down';
bouncingImages.posY[layerLoop] = 0;
}
}
else if (bouncingImages.dirY[layerLoop] == 'down') {
if (bouncingImages.posY[layerLoop] + bouncingImages.imgHeight < winHeight - bouncingImages.speedY[layerLoop]) bouncingImages.posY[layerLoop] += bouncingImages.speedY[layerLoop];
else {
bouncingImages.dirY[layerLoop] = 'up';
bouncingImages.posY[layerLoop] = winHeight - bouncingImages.imgHeight;
}
}
}
for (var layerLoop = 0; layerLoop < bouncingImages.imgCount; layerLoop++) moveLayerTo(bouncingImages['layerObj' + layerLoop],bouncingImages.posX[layerLoop] + getDocScrollLeft(),bouncingImages.posY[layerLoop] + getDocScrollTop());
window.setTimeout('moveBouncingImages()',bouncingImages.frameRate);
}
This is a script which has a window slide down on the page and a user can choose yes/no to continue. It works in all browsers other than IE...any help please? If you need more info, please let me know. Thanks. <script language="JavaScript" type="text/javascript"> <!-- var allowpop=1; function popWin(){ var ppl="popLayer";var objppl=findObj(ppl); if (objppl==null){return;}// if the layer does not exist, do nothing. var args=arguments,movetoX=parseInt(args[0]),movetoY=parseInt(args[1]),movespeed=parseInt(args[2]); var cycle=10,pxl=""; if(!document.layers){objppl=objppl.style;} if(objppl.tmofn!=null){clearTimeout(objppl.tmofn);} var pplcoordX=parseInt(objppl.left),pplcoordY=parseInt(objppl.top); var xX=movetoX,yY=movetoY;if((pplcoordX!=movetoX)||(pplcoordY!=movetoY)){ var moveX=((movetoX-pplcoordX)/movespeed),moveY=((movetoY-pplcoordY)/movespeed); moveX=(moveX>0)?Math.ceil(moveX):Math.floor(moveX);movetoX=pplcoordX+moveX; moveY=(moveY>0)?Math.ceil(moveY):Math.floor(moveY);movetoY=pplcoordY+moveY; if((parseInt(navigator.appVersion)>4||navigator.userAgent.indexOf("MSIE")>-1) && (!window.opera)) {pxl="px";} if (moveX!=0){eval("objppl.left='" + movetoX + pxl + "'");} if (moveY != 0) {eval("objppl.top = '" + movetoY + pxl + "'");} var sFunction = "popWin(" + xX + "," + yY + "," + movespeed+ ")"; objppl.tmofn = setTimeout(sFunction,cycle); } } function findObj(theObj, theDoc){ var p, i, foundObj; if(!theDoc) theDoc = document; if((p = theObj.indexOf("?")) > 0 && parent.frames.length) {theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p);} if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj; } function hideLayer(layername){ layer=findObj(layername); if(layer.style){layer=layer.style;} layer.visibility='hidden'; } // --> </script> I have a few tabs on my website. They're each set to the corresponding id in the JS file. It's supposed to add #tab-1 to the end of the URL in the users browser when it's clicked. For example, when a user is at mypage.com and they click on the tab, it ads mypage.com/#tab-1 to the end. How come it doesn't do what I want when I click it though? Here's an example of how it's setup. HTML: <a href="#tab-1" id="tab1">Text</a> JavaScript: document.getElementById("tab1").onclick = function(){ this.href += "#tab-1"; } hello... script doesn't work.. it does work in IE but not in another browser like mozilla,opera & safari? what should I do?.. Code: //Current HTML of page
var html="";
//View of the page, Normal (Design), HTML, Preview
var currentview=0;
//Hold window objects for the color, table and properties dialogs
var table_dialog, color_dialog, properties_dialog;
//Current color action, ForeColor, or BackColor,
//used for communication between PageCreate window and Color dialog window
var pp;
//Is used to disable use of design tools in HTML or Preview mode
var enabletoolbar=false;
//Variable counter used to index the search in the document
var n=0;
function InitEditor(){
//Init editor in design mode,
maineditor.document.designMode=docmode;
//Write a blank page
WriteDefaultPage();
//Disable context menu
maineditor.document.oncontextmenu=new Function("return false;");
//Set focus to the editor
maineditor.focus();
}
function EditorView(view){
//Changes editor view to Normal, HTML, and Preview
if(currentview==1){
//If the last view was HTML then get the HTML edited by user in HTML mode
html=maineditor.document.body.innerText;
}
//If the last mode was Normal then get the whole HTML content of the page
else html=maineditor.document.all.tags("HTML")[0].outerHTML;
if(view==0){
//Normal Mode
EnableToolbar(true);
maineditor.location="about:blank";
maineditor.document.designMode=docmode;
maineditor.document.open("text/html");
maineditor.document.write(html);
maineditor.document.close();
maineditor.document.oncontextmenu=new Function("return false;");
maineditor.focus();
}
if(view==1){
//HTML Mode
EnableToolbar(false);
maineditor.location="about:blank";
maineditor.document.designMode=docmode;
WriteDefaultPage();
HTMLView();
maineditor.document.oncontextmenu=new Function("return false;");
}
if(view==2){
//Preview Mode
EnableToolbar(false);
maineditor.location="about:blank";
//Disable page editing
maineditor.document.designMode="Inherit";
//Write the HTML of the page
maineditor.document.open("text/html");
maineditor.document.write(html);
maineditor.document.close();
//Enable context menu
maineditor.document.oncontextmenu=new Function("return true;");
}
//Set current view
currentview=view;
}
function EnableToolbar(enable){
//Enable or disable toolbar
enabletoolbar=enable;
}
function OpenFile(){
if(window.confirm("Do you want to save changes in the current document?")){
//Show Save As Dialog
maineditor.document.execCommand("SaveAs");
}
fileopen_dialog.style.visibility="visible";
}
function OpenSelectedFile(){
//Check if the file is an HTML page
if(document.fileselect.thefile.value.indexOf(".htm")==-1){
window.alert("The selected file is not an HTML page, please select a valid HTML file");
return;
}
//Hide the open file dialog
fileopen_dialog.style.visibility="hidden";
//Create the FSO object
var fso=new ActiveXObject("Scripting.FileSystemObject");
//Open the selected file
var f=fso.OpenTextFile(document.fileselect.thefile.value);
//Get the content of the file
var thehtml=f.ReadAll();
//Close the file
f.close();
//Write a blank page
maineditor.window.location="about:blank";
//Write the HTML content
maineditor.document.open("text/html");
maineditor.document.write(thehtml);
maineditor.document.close();
//Set focus to editor
maineditor.focus();
}
function WriteDefaultPage(){
//Writes a blank HTML page in the editor
var pagehtml="<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; " +
"charset=windows-1252\">\n<meta name=\"GENERATOR\" content=\"PageCreate\">\n" +
"<title>New Page</title>\n</head>\n<body>\n</body>\n</html>";
maineditor.document.open("text/html");
maineditor.document.write(pagehtml);
maineditor.document.close();
}
function NewPage(){
if(window.confirm("Do you want to save changes in the current document?")){
//Show Save As Dialog
maineditor.document.execCommand("SaveAs");
}
//Write a blank page
maineditor.window.location="about:blank";
WriteDefaultPage();
//Set focus to editor
maineditor.focus();
}
function HTMLView(){
//Switch to HTML view
maineditor.document.body.innerHTML="";
maineditor.document.body.innerText=html;
}
function TableOn(table, on){
//Highlights the table on which the mouse is over
if(on) table.style.backgroundColor="#95AFFF";
else table.style.backgroundColor="#82DF82";
}
function ToolbarOn(toolon){
//Highlights on or off the current toolbar
//Get the toolbar button on which the mouse is over
var tool=event.srcElement;
//Change background color
if(toolon){
tool.style.backgroundColor="#B4A0FE";
tool.style.borderColor="#000000";
}
else{
tool.style.backgroundColor="#D1D1D1";
tool.style.borderColor="#D1D1D1";
}
}
function FindInPage(showdialog){
//Shows the Find and Replace Dialog
var display="visible";
if(showdialog==false) display="hidden";
find_dialog.style.visibility=display;
if(showdialog!=false) document.find.findwhat.focus();
}
function FindIt(str, replacestr, newstr){
//This functions searchs for a string in the document
//and if specified then replaces it with a new string
if(str==""){
//If no string to search entered
alert("Enter a string to search");
document.find.findwhat.focus();
return;
}
//Creates a range in the document
txt = maineditor.document.body.createTextRange();
//Loop to find the string in the document
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if(found) {
//If founded select it and scroll into view
txt.moveStart("character", -1);
txt.findText(str);
//If replace is specified then replace the match with the new string
if(replacestr) txt.text=newstr;
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
window.alert("There are no more matches");
n=0;
}
// Not found anywhere, give message.
else
window.alert("\"" + str + "\" was not founded in document");
}
}
function InsertHTML(newhtml){
//Inserts HTML in the selection of the document
maineditor.focus();
var selpoint=maineditor.document.selection.createRange();
selpoint.pasteHTML(newhtml);
}
function GetSelectedText(){
//Get the selection of the document
maineditor.focus();
var selpoint=maineditor.document.selection.createRange();
var seltext=selpoint.text;
return seltext;
}
function InsertNewImage(){
if(enabletoolbar==false) return;
maineditor.focus();
//Open Insert Image Dialog
maineditor.document.execCommand("insertimage", true, null);
}
function InsertForm(){
//Creates a new form
var formmethod=window.prompt("Choose form method: GET | POST", "POST");
var formaction=window.prompt("Choose form action:", "http://");
InsertHTML("<div style=\"background-Color:#C0C0C0\"><form method=\"" + formmethod + "\" action=\"" + formaction + "\">\n<p> </p></form></div>");
}
function InsertFormControl(control){
maineditor.focus();
//Inserts a form control
maineditor.document.execCommand(control, true, null);
}
function CreateNewLink(){
//Inserts a link in the selected text
if(enabletoolbar==false) return;
var linktext=GetSelectedText();
if(linktext=="") return;
var url=window.prompt("Enter a URL for the new link:", "http://");
if(url!=null){
InsertHTML("<a href=\"" + url + "\">" + linktext + "</a>");
}
maineditor.focus();
}
function InsertTable(){
//Open Table Dialog
table_dialog=window.open("table.htm", "newtable", "top=100,left=100,height=300,width=400,scrollbars=no");
}
function CreateTable(tr, tc, ta, tb, tp, ts, tw, tt){
//Creates a new table
var tablewidth="";
if(tw!=""){
tablewidth=" width=\"" + tw + tt + "\"";
}
var thtml="<table border=\"" + tb + "\" cellpadding=\"" + tp + "\" cellspacing=\"" + ts + "\"" + tablewidth + ">";
tr=parseInt(tr);
tc=parseInt(tc);
for(r=0;r<tr;r++){
thtml+="<tr>";
for(c=0;c<tc;c++){
thtml+="<td></td>";
}
thtml+="</tr>";
}
thtml+="</table>";
InsertHTML(thtml);
table_dialog.close();
}
function EditPage(){
properties_dialog=window.open("properties.htm", "editpage", "top=100,left=100,height=275,width=387,scrollbars=no");
}
function EditPageProperties(pt, pfc, pbgc, pbgi, usewatermark, pbgs){
maineditor.document.title=pt;
maineditor.document.body.text=pfc;
maineditor.document.body.bgColor=pbgc;
maineditor.document.body.background=pbgi;
if(usewatermark) maineditor.document.body.bgProperties="fixed";
else maineditor.document.body.bgProperties="";
if(pbgs!=""){
var pagehtml=maineditor.document.all.tags("HTML")[0].outerHTML;
var bodytag= pagehtml.toLowerCase().indexOf("<body");
if(bodytag==-1) return;
var beforebodytag= pagehtml.substring(0, bodytag);
var afterbodytag= pagehtml.substring(bodytag, pagehtml.length);
var pagehtml=beforebodytag + "<bgsound src=\"" + pbgs + "\">" + afterbodytag;
maineditor.document.open("text/html");
maineditor.document.write(pagehtml);
maineditor.document.close();
}
properties_dialog.close();
maineditor.focus();
}
function ChangeForeColor(){
//Show the Color dialog to edit Fore Color of text selected
if(GetSelectedText()!=""){
pp="EditForeColor";
color_dialog=window.open("color.htm", "colorpicker", "top=100,left=100,height=270,width=500,scrollbars=no");
}
}
function EditForeColor(thecolor){
maineditor.focus();
//Change fore color of text selected
maineditor.document.execCommand("forecolor", false, thecolor);
//Close Color Dialog
color_dialog.close();
}
function ChangeBackColor(){
//Show the Color dialog to edit Back Color of text selected
if(GetSelectedText()!=""){
pp="EditBackColor";
color_dialog=window.open("color.htm?p=EditBackColor", "colorpicker", "top=100,left=100,height=270,width=500,scrollbars=no");
}
}
function EditBackColor(thecolor){
maineditor.focus();
//Change back color of text selected
maineditor.document.execCommand("backcolor", false, thecolor);
//Close Color Dialog
color_dialog.close();
}
function ChangeFont(font){
//Changes the font of the selected text
maineditor.focus();
maineditor.document.execCommand("fontname", false, font);
}
function ChangeFontSize(size){
//Changes the font size of the selected text
maineditor.focus();
maineditor.document.execCommand("fontsize", false, size);
}
function DesignTools(tool){
//Activates design tool
if(enabletoolbar==false){
window.alert("You must switch into normal view to do this");
return;
}
maineditor.focus();
maineditor.document.execCommand(tool, true, null);
}
Hi! I'm new to JavaScript and I've done some small adjustments to my clients site, but it won't show properly in IE (the shadowbox js at least.). I thought js was accepted in all newer browsers. Do you have a quick fix or idea on why it doesn't work? You can view source on my site, I use mootools, and shadowbox/corners and rightclick blocker. Is it generally a 'bad thing' to use js in webpages I want everyone to view in the same way? I tried the same effects with CSS but it's not supported in the same way corss-browser, unfortunately. The 'no selection' CSS class I have on the site is also not accepted in IE. It's very annoying! http://santinacrolla.ihaarr.com/p thank you in advance! Heya, I wrote the following page in a day or two (please don't mind the layout). Everything seems to work excellent, apart from in Firefox (FF) in which it doesn't seem to work at all. None of the other browsers have any trouble with it. I'm pretty new to Javascript (everything you see in the source code is pretty much all I know) and I have absolutely no idea why it doesn't work in Firefox. The page in question could be found [link has been removed]. It's all there is to it. So yeah, how to actually make this work in FF? Thanks a whole bunch in advance! Much appreciated. I've got a form textarea on my site, which after being submitted is stripped by my php file. Then my javascript kicks in and does some analysis of the entered text. However everytime the user entered a hard return within the textarea my javascript gives me an error 'tekenreeks niet afgesloten' which means something like 'string is not closed'. Therefore I decided to replace all occurences of chr(10) and chr(13) with ok2 (just some random characters), I did this with php which worked fine, and I didn't get the javascript error. However I need to reshow the entered text (original) to the user, so I need to restore the old values. I tried Code: result.waarde.replace('ok2', 'chr(13)');
but it doesn't work, as it still displays ok2. I'm no expert in javascript, but how can I replace those characters by the hard returns? Oh yeah I'll show some more coding, perhaps the error can be found the Code: result.waarde.replace('mdw', 'chr(13)');container.innerHTML = result.waarde;
and in my html: Code: <div id='waarde' style="width:500px;"></div> Code: <html>
<head>
<script>
function color() {
var newColor=new Array('#00f','#f00','#ff0');
var i=0;
for (i=0;i<=3;i++)
{
document.getElementByTagName(span).style.display=newColor[i];
}
}
color();
</script>
<div>
<span>make this text blue</span>
<span>make this text red</span>
<span>make this text yellow</span>
</div>
</body>
</html>
It should make the first blue, second red, and third yellow yes? Below is code using the onmouseover event, but it doesn't work. The only thing that appears in the status bar is the URL. What am I doing wrong? Code: <a href="http://codingforums.com" onmouseover="window.status='This is an OnMouseOver event'; return true" onmouseout="window.status=' '; return true">Put your mouse here to see status info change at bottom.</a> |
|||||||