JavaScript - Jquery Colorbox - Does It Work For Text?

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

Validation is here - http://jquery.bassistance.de/validate/demo/ - JGrowl is here - http://stanlemon.net/projects/jgrowl.html - How can I get those 2 to work so that a Jgrowl window is activated when a validation from a form is called? I have 2 bucks to give for an answer in my Paypal account - I'm a newb, bare with me

Thanks,
Jon

I'm having a slight problem with php pagination and jquery/js. On the following page http://dev2.bluemuledesign.com/athletes.php you'll see an "athlete profile" area. Whenever an athlete photo is selected, javascript/php are used to switch out the athlete info. This works perfectly fine. The problem occurs if I use the left or right arrows to view more athletes (the left and right arrows are set with php pagination to switch to the next four records in the database). Whenever I do this, the athlete info defaults back to the first person from the initial load. Also, the javascript/jquery quits working and won't let me view the info for one of the newly displayed athletes. So I have two questions:

1) Can anyone tell me why it defaults back to the original athlete info? I'm assuming it has something to do with me not setting a cookie to remember the currently selected athlete.
2) Why does the javascript quit working when I view the next set of athletes?

Also, the jquery slideshow that I am implementing is an alteration of this: http://designm.ag/tutorials/image-rotator-css-jquery/

Any help would be greatly appreciated.

This 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)
            }
        });
    };

Hello, i would like to advise me on sthg.

I have built a website using a)MySQL b)HTML c)PHP and d)Javascript.

My website consists of basic html pages/templates which have links to the left and point to another templates/pages.
For example, i have 4 templates in my site
1st template is for: News
2nd : Library
3nd : Articles
4th : E-shop

Each template consists of 1. a small menu with links,every link points to another page 2.space for the content/text of the html page 3. a form for searching in the website using php and a mysql database.

Well, i'm thinking of adding some animation in my website using the jquery library.Let's say we have an accordion which has 4 choices and when the user clicks on the first choice the 1st template(NEWS) appears inside the slide of accordion,loads in the same slide, not in a new page!!!This is what i would like to do, place in each slide of the accordion one of my templates. CAn this be done???
Which are the disadvantages of adding in each slide of the accordion a different template for my site and remain in the same slide when the user clicks in one of the links of the template???
Consider that i'm using dynamic content and not static, i have a MySQL database behind.

Also,as i have seen in most examples the options of accordion usually contain an image, a content, a text or links which open in a new window or tab not inside the slide!!!These links do not load in the same slide!!i would like to have a template which loads in the slide each time the user clicks on a link of it.

CAn this be done??

I would be glad if sm could advise me!
Thanks, in advance!!!

Hi,

I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work.

Is there away around this?

Not sure if providing my script helps or not, but just in case here it:
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">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){

	var btn = $(this).attr('id');
	if(btn == 'submitNewSend'){
		file = 'insertMessage.php';
		Msg = 'Your message has been sent';
	} else if(btn == 'submitNewSend2'){
		file = 'insertMessage.php';
		Msg = 'Your message has been sent';
	} else if (btn == 'submitNewSave'){
		file = 'insertSaveMessage.php';
		Msg = 'Your message has been saved';
	} else if (btn == 'submitNewSave2'){
		file = 'insertSaveMessage.php';
		Msg = 'Your message has been saved';
	}
		var data = $('#MessageNew').serialize();
		$.post (file,data, function(){
				alert(Msg);
			$('#MessageNew').each (function(){
				this.reset();
				});
			});	
				return false;
	});
});
</script>


<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>

And the getloadCompose.php is:
Code:

<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
	<tr>
	<th>Compose Message</th>
	</tr>
	<tr>
	<td class="first">
	<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
	<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save"> 
	<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
	</td>
	</tr>
	<tr>
	<td>
		<br />
		<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
		<div id="txtHintEmailTo"></div>
	</td>
	</tr>
	<tr>
	<td>
		<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
	</td>
	</tr>
	<tr>
	<td>
		<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />

	</td>
	</tr>
	<tr>
	<td class="first">
	<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
	<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save"> 
	<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
	</td>
	</tr>
	</table>
</form>

I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do.

All,
I have the following code:
Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title></title>
 
  <style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script>
$( "#drg" ).draggable({
  revert: true
});

var drpOptions = {
  drop: function(event, ui) {
    $(this).append( ui.draggable.text() + "<br>" );
  }
};

$( "#drplist" ).children().droppable( drpOptions );

$( "button" ).button().click(function() {
  $( "<li>Dynamic droppable<hr></li>" ).droppable( drpOptions ).appendTo( "#drplist" );
});
</script>
  <style type="text/css">

#drg { background: silver; width: 100px; padding: 0.5em; text-align: center; }
ul, ul li { list-style: none; margin:0 ; padding: 0; }
#drplist li { width: 200px; height: 100px; margin: 1em; padding: 0.5em; background: lightgreen; }

  </style>
  </head>
<body>

<div id="drg">
Drag me
</div>

<hr>
<button>Click to add a droppable</button>

<ul id="drplist">
<li>Drop here<hr></li>
</ul>

</body>
</html>

Basically what I would like to happen is that when I click on the button it generates the table like it did and then I want like two checkboxes next to it with some text and a break line in between the two. How can I update my jQuery to give me this result?

Thanks in advance!

Hi,

This must be a 1st.

It works ok in IE...But not in Firefox?

I need to use white text over a dark bg color or if possible over an image.
The problem is in FF the white text distorts on fade

The black text works ok when adding the white bg.

See my test code below. (It can be copied straight in to test)

If anyone could please take a quick look and give some pointers.

Code:

 <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML DIR="LTR" LANG="en">
<head>
<title>Working-Test-Banner</title>
<style type="text/css">
#welcomebanner img {border: none;}
#wrapper{position:relative;}
#welcomebanner {margin: 0; padding: 0;  position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}

p{font-size:30px;background-color:purple;color:#fff;}

h2{font-size:30px;background-color:#fff;color:#000;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
	var $j = jQuery;
	var welcomeBannerTimer;
	
	function nextSlide(){
		var el = $j('#welcomebanner');
		var slides = el.data('slides');
		var c = el.data('slideIndex');
		var n = ((c+1) >= slides.length)? 0 : c+1;
		el.data('slideIndex', n);
		$j(slides[c]).fadeOut(null, function(){
			$j(slides[n]).fadeIn();
			
		});
	}
	
	function over(){
		clearInterval(welcomeBannerTimer);
	}
	
	function out(){
		welcomeBannerTimer = setInterval(nextSlide, 3000);
	}
	
	$j(window).load(function() {
		var el = $j('#welcomebanner');
		var slides = $j('#welcomebanner>li');
		if (slides.length < 2){
			$j(slides[0]).show();
			return;
		}
		el.data('slides', slides);
		el.data('slideIndex', 0);
		welcomeBannerTimer = setInterval(nextSlide, 3000);
		el.bind('mouseenter', over).bind('mouseleave', out);
		$j(slides[0]).show();
		
	});
	
	
</script>

</head>
<body>

<div id="wrapper">

<ul id="welcomebanner">

  <li>

	<h2>testing the text fade</h2>
	<p>testing the text fade</p>

 </li>  

 <li>  

<h2>Firefox and IE problems</h2>
	<p>Firefox and IE problems</p>

 </li>  
   
</ul>

</div>
</body>
</html>

I have made myself an HTML Menu which is located on top of my current Flash object.

I have a question whether it really is not possible to get the same effect as 'text' has on the original "Flash Menu"

EX: www.moebelarkitekten.dk

and get the same effect over at my new HTML menu (Coded with Jquery)
EX: http://www.richyjassal.co.uk/moebelar/

Right now it is almost the same effect, but only:
OnMouseOver align text to Right
OnMouseOut text to align left



A guide, or other?

Hi,

I'd like to use the jQuery validation plugin as seen on the following example:
http://docs.jquery.com/Plugins/validation#Example

But it doesn't work properly if I use inline/in-filed labels.


Any help is appreciated!
Rain Lover

I have always loved the way the text boxes work for comments on Deviantart:
http://www.deviantart.com/#/d37kh7x

That is just a picture I chose at random. Underneath the picture, it says "Add a Comment" and there is a textbox. When you click inside it, the textbox expands. There is also a speech bubble coming from the lefthand side of the textbox? HOW THE HECK ARE THESE DONE??? It looks so clean and pretty. I think it's a Javascript thing. When I save the page to my computer to start messing around with the code, the textbox does not expand, and the speech bubble does not come from the lefthand side of the textbox. So i can't play with the code to try to figure it out myself. Why doesn't the feature work when I save the page to my desktop?

I'm fairly new to JS so sorry in advance if this is a stupid question!

I have a textarea which uses ckeditor to make it a wysiwyg. I also have a bit of JS which watches the ckeditor and when a user types into it, whatever they type appears in a div elsewhere on the page.

My ckeditor allows the text to be bold, italic, underlined and resized. When I apply styles to the text in the ckeditor textarea, I want them to reflected in the div which updates. At the moment only underline and resizing the text works. Choosing bold or italic does nothing the text updates ok, but no bold or italic.

I've been told: "Ckeditor is using strong for bold, em for italics. My guess is that the browser or framework you are using doesn't apply bold and italics styles to those tags. You'll have to do that yourself."

I've tested on several browsers, I checked in FF Opera Safari Chrome IE8 & IE9 and its the same in all them. Underline works, resize works but neither bold or italic do. (Interestingly in IE7 bold and italic do work as well as the size and underline! What's going on with that?!?)

So I assume it is the framework? Can anyone tell me if this is right and if so, how do I go about doing that myself?

heres the JS I'm using to update the div:

Code:

<label for="editor1">Background Story</label>
<textarea id="editor1" name="editor1">This is sample text</textarea>
<div id="story"></div>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
timer = setInterval('updateDiv()',100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
$('#story').html(editorText);
}</script>

Hello everyone. I hope I'm posting this in the right place.

I'm using the Disco Background Effect script found here that causes the background color of the page to continuously change.

For my design I need other aspects of the page to change along with it. Such as some title Text and HR lines.

Is it possible to call this script to work on other things such as images, text and HR lines? In other words I want some text to change color in time with the background changing.

I appreciate any help you might have.

Ron

Hello


I have this snippet for controlling the number of characters entered in a textarea. It works.

But, if I replace in this code the name "my_form" by "contact-form" and "my_text" by "message", it doesnt ! It looks like the keyword is " my_form ". You change that , and the script will not work!

It turns out that I have to change those names because the form as it was already had those names my_form and message before I added this counter And I dont want to replace the names of the form in order to adapt them to this code snippet below.

The question is why would the script not work if I have just replaced two words, which dont seem to be keywords of JS programming (my_form and my_text)

<html><head>
<title>(Type a title for your page here)</title>

<script language=JavaScript>
<!--
function check_length(my_form)
{
maxLen = 50; // max number of characters allowed
if (my_form.my_text.value.length >= maxLen) {
// Alert message if maximum limit is reached.
// If required Alert can be removed.
var msg = "You have reached your maximum limit of characters allowed";
alert(msg);
// Reached the Maximum length so trim the textarea
my_form.my_text.value = my_form.my_text.value.substring(0, maxLen);
}
else{ // Maximum length not reached so update the value of my_text counter
my_form.text_num.value = maxLen - my_form.my_text.value.length;}
}
//-->
</script>

</head>

<body>
<form name=my_form method=post>
<textarea onKeyPress=check_length(this.form); onKeyDown=check_length(this.form); name=my_text rows=4 cols=30></textarea>
<br>
<input size=1 value=50 name=text_num> Characters Left
</form>

</body>
</html>