[jQuery] Conflict with Mootools...
I have a lot of jquery scripts in my html and I just added a mootools script. Now none of my jquery scripts don't work. script type=text/javascript src=/src/js/rssticker.js/script script type=text/javascript src=/src/js/slideshow.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery-1.2.3.min.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery.easing.min.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery.lavalamp.min.js/script script type=text/javascript src=/src/js/jquery/ jquery-1.2.6.min.js/script script type=text/javascript src=/src/js/jquery/ jquery.labelify.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ barack/barackslideshow.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ barack/demo.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ 1.2.1/core.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ 1.2.1/more.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ barack/morphlist.js/script I need help. Can someone show me how to use the noconflict script. Many thanks. Erik
[jQuery] Re: New link being ignored by jQuery
I did check it out... It still doesn't work. All of the scripts in div tags, both Mootools and jquery... Need help.. Erik On Jan 19, 2009, at 4:47 PM, Karl Rudd wrote: Check out the documentation for several solutions: http://docs.jquery.com/Frequently_Asked_Questions#Why_do_..._.3F Karl Rudd On Tue, Jan 20, 2009 at 5:14 AM, Mark MacInnes markamacin...@googlemail.com wrote: I'm using jQuery to perform some ajax when a link with a certain id is clicked on. The ajax updates a database record and then it replaces the 'a' tag with a new one. This all works fine. The new 'a' tag has the same id as the old one, but text and some other properties on it change. It's the id that activates the jQuery functionality. When the old 'a' tag is replaced with the new one the jQuery that should operate doesn't work. I understand that this is because the new 'a' tag has been added after the page loaded so jQuery doesn't know to fire when it's clicked on. Is there anything I can do that will force jQuery to fire when the new 'a' tag is clicked? I suspect this has probably been answered a million times, but I don't just can't find the right search terms.
[jQuery] Re: Conflict with Mootools...
Good question.. I'll fix that... Can you give me the script to fix the conflict? Erik On Jan 19, 2009, at 4:43 PM, MorningZ wrote: How come you are including both 1.2.3 and 1.2.6 versions of jQuery? On Jan 19, 4:40 pm, Erik R. Peterson eriks...@mac.com wrote: I have a lot of jquery scripts in my html and I just added a mootools script. Now none of my jquery scripts don't work. script type=text/javascript src=/src/js/rssticker.js/script script type=text/javascript src=/src/js/slideshow.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery-1.2.3.min.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery.easing.min.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery.lavalamp.min.js/script script type=text/javascript src=/src/js/jquery/ jquery-1.2.6.min.js/script script type=text/javascript src=/src/js/jquery/ jquery.labelify.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ barack/barackslideshow.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ barack/demo.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ 1.2.1/core.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ 1.2.1/more.js/script script type=text/javascript charset=utf-8 src=/src/js/mootools/ barack/morphlist.js/script I need help. Can someone show me how to use the noconflict script. Many thanks. Erik
[jQuery] Re: Conflict with Mootools...
Thank you. I read as you instructed me and I'm still confused. My first question, is there one script i can place in the header that will eliminate the conflict? I actually read Using jQuery with Other Libraries I understand the problem, but still having problems with the fix. Can there be one script placed in the head of the page that will eliminate all the conflicts with different scripts? script type=text/javascriptvar $j = jQuery.noConflict();/script Thanks for your help. Erik On Jan 19, 2009, at 5:16 PM, MorningZ wrote: ps... reading your post for the 4th time, i realize now that the first two files are probably not related to jQuery hence they'd be safe anyways, show some code where you are trying to use jQuery and trying to initialize your HTML to use the plugins you need that would make it easier for others to help you On Jan 19, 5:11 pm, MorningZ morni...@gmail.com wrote: Rather than just myself or someone else posting what *probably* would work... how about some work to help understand what's going on? First off, make sure to read the link Karl posted... Secondly, before you do *anything* jQuery related, you want to include the library first.. you've got 3 or 4 include files that need jQuery before you even load jQuery... that would be the reason why your code doesn't work Third, and related to First, you want to set the .noConflict as soon as you can so your code is consistently using the same methods for using jQuery On Jan 19, 5:05 pm, Erik R. Peterson eriks...@mac.com wrote: Good question.. I'll fix that... Can you give me the script to fix the conflict? Erik On Jan 19, 2009, at 4:43 PM, MorningZ wrote: How come you are including both 1.2.3 and 1.2.6 versions of jQuery? On Jan 19, 4:40 pm, Erik R. Peterson eriks...@mac.com wrote: I have a lot of jquery scripts in my html and I just added a mootools script. Now none of my jquery scripts don't work. script type=text/javascript src=/src/js/rssticker.js/ script script type=text/javascript src=/src/js/slideshow.js/ script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery-1.2.3.min.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery.easing.min.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery.lavalamp.min.js/script script type=text/javascript src=/src/js/jquery/ jquery-1.2.6.min.js/script script type=text/javascript src=/src/js/jquery/ jquery.labelify.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ barack/barackslideshow.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ barack/demo.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ 1.2.1/core.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ 1.2.1/more.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ barack/morphlist.js/script I need help. Can someone show me how to use the noconflict script. Many thanks. Erik
[jQuery] Re: Conflict with Mootools...
Thank you so much!! Erik On Jan 20, 2009, at 9:42 AM, WhoButSB wrote: Hi Erik, If you are using the jQuery.noConflict function and set the jQuery Selector variable to $j as in: var $j = jQuery.noConflict(); You need to make sure you go through all your jQuery code and change the $() selector to $j() or whatever you set the variable to. Also note note you need to make sure you aren't using $j in any of your mootools code as well. Good luck, Steve On Jan 19, 5:35 pm, Erik R. Peterson eriks...@mac.com wrote: Thank you. I read as you instructed me and I'm still confused. My first question, is there one script i can place in the header that will eliminate the conflict? I actually read Using jQuery with Other Libraries I understand the problem, but still having problems with the fix. Can there be one script placed in the head of the page that will eliminate all the conflicts with different scripts? script type=text/javascriptvar $j = jQuery.noConflict();/script Thanks for your help. Erik On Jan 19, 2009, at 5:16 PM, MorningZ wrote: ps... reading your post for the 4th time, i realize now that the first two files are probably not related to jQuery hence they'd be safe anyways, show some code where you are trying to use jQuery and trying to initialize your HTML to use the plugins you need that would make it easier for others to help you On Jan 19, 5:11 pm, MorningZ morni...@gmail.com wrote: Rather than just myself or someone else posting what *probably* would work... how about some work to help understand what's going on? First off, make sure to read the link Karl posted... Secondly, before you do *anything* jQuery related, you want to include the library first.. you've got 3 or 4 include files that need jQuery before you even load jQuery... that would be the reason why your code doesn't work Third, and related to First, you want to set the .noConflict as soon as you can so your code is consistently using the same methods for using jQuery On Jan 19, 5:05 pm, Erik R. Peterson eriks...@mac.com wrote: Good question.. I'll fix that... Can you give me the script to fix the conflict? Erik On Jan 19, 2009, at 4:43 PM, MorningZ wrote: How come you are including both 1.2.3 and 1.2.6 versions of jQuery? On Jan 19, 4:40 pm, Erik R. Peterson eriks...@mac.com wrote: I have a lot of jquery scripts in my html and I just added a mootools script. Now none of my jquery scripts don't work. script type=text/javascript src=/src/js/rssticker.js/ script script type=text/javascript src=/src/js/slideshow.js/ script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery-1.2.3.min.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery.easing.min.js/script script type=text/javascript src=/src/js/jquery/lavalamp/ jquery.lavalamp.min.js/script script type=text/javascript src=/src/js/jquery/ jquery-1.2.6.min.js/script script type=text/javascript src=/src/js/jquery/ jquery.labelify.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ barack/barackslideshow.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ barack/demo.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ 1.2.1/core.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ 1.2.1/more.js/script script type=text/javascript charset=utf-8 src=/src/js/ mootools/ barack/morphlist.js/script I need help. Can someone show me how to use the noconflict script. Many thanks. Erik
[jQuery] Re: Conflict with Mootools...
I did everything you pointed out. It still doesn't work: script type=text/javascriptvar $j = jQuery.noConflict();/script Where do I place this script in my html? I verified none of my mootools is using $j() Very frustrated. Any help is greatly appreciated. Erik On Jan 20, 2009, at 9:42 AM, WhoButSB wrote: $j
[jQuery] Re: Conflict with Mootools...
Here is my code:
!--
script type=text/javascript src=/src/js/mootools/1.2.1/core.js
charset=utf-8/script
script type=text/javascript src=/src/js/mootools/1.2.1/more.js
charset=utf-8/script
script type=text/javascript src=/src/js/mootools/barack/
morphlist.js charset=utf-8/script
script type=text/javascript src=/src/js/mootools/barack/
barackslideshow.js charset=utf-8/script
script type=text/javascript src=/src/js/mootools/barack/demo.js
charset=utf-8/script
--
script type=text/javascript src=/src/js/jquery/
jquery-1.2.6.min.js/script
script type=text/javascript src=/src/js/jquery/
jquery.labelify.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery-1.2.3.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.easing.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.lavalamp.min.js/script
script type=text/javascript
$(document).ready(function(){
$(:text).labelify();
});
/script
script type=text/javascript
$(function() {
$(#1, #2, #3).lavaLamp({
fx: backout,
speed: 800,
click: function(event, menuItem) {
return false;
}
});
});
/script
script type=text/javascript
function change(id,newtext)
{
document.getElementById(id).innerHTML=newtext
}
/script
/head
body
On Jan 20, 2009, at 1:26 PM, Erik R. Peterson wrote:
I did everything you pointed out. It still doesn't work:
script type=text/javascriptvar $j = jQuery.noConflict();/script
Where do I place this script in my html?
I verified none of my mootools is using $j()
Very frustrated.
Any help is greatly appreciated.
Erik
On Jan 20, 2009, at 9:42 AM, WhoButSB wrote:
$j
[jQuery] Re: Conflict with Mootools...
Here all my jquery scripts in my head:
script type=text/javascript src=/src/js/jquery/
jquery-1.2.6.min.js/script
script type=text/javascript src=/src/js/jquery/
jquery.labelify.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery-1.2.3.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.easing.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.lavalamp.min.js/script
I went through all these scripts and replaced $( with $j(.
I also changed the following script in my head:
$(document).ready(function(){
$(:text).labelify();
});
/script
script type=text/javascript
$(function() {
$(#1, #2, #3).lavaLamp({
fx: backout,
speed: 800,
click: function(event, menuItem) {
return false;
}
});
});
/script
Next, do I place script type=text/javascriptvar $j =
jQuery.noConflict();/script at the bottom of my head?
I did this and still no success.
Erik
On Jan 20, 2009, at 1:37 PM, Steven Barbera wrote:
Which part of the code are you using jQuery with? Because at the
very top after you call the jQuery script you should set the var $j
= jQuery.noConflict() method. In then in front of all the jQuery
code $ selectors change them to $j, so jQuery code will be applied
to them.
On Tue, Jan 20, 2009 at 1:35 PM, Erik R. Peterson eriks...@mac.com
wrote:
Here is my code:
!--
script type=text/javascript src=/src/js/mootools/1.2.1/core.js
charset=utf-8/script
script type=text/javascript src=/src/js/mootools/1.2.1/more.js
charset=utf-8/script
script type=text/javascript src=/src/js/mootools/barack/
morphlist.js charset=utf-8/script
script type=text/javascript src=/src/js/mootools/barack/
barackslideshow.js charset=utf-8/script
script type=text/javascript src=/src/js/mootools/barack/demo.js
charset=utf-8/script
--
script type=text/javascript src=/src/js/jquery/
jquery-1.2.6.min.js/script
script type=text/javascript src=/src/js/jquery/
jquery.labelify.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery-1.2.3.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.easing.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.lavalamp.min.js/script
script type=text/javascript
$(document).ready(function(){
$(:text).labelify();
});
/script
script type=text/javascript
$(function() {
$(#1, #2, #3).lavaLamp({
fx: backout,
speed: 800,
click: function(event, menuItem) {
return false;
}
});
});
/script
script type=text/javascript
function change(id,newtext)
{
document.getElementById(id).innerHTML=newtext
}
/script
/head
body
On Jan 20, 2009, at 1:26 PM, Erik R. Peterson wrote:
I did everything you pointed out. It still doesn't work:
script type=text/javascriptvar $j = jQuery.noConflict();/
script
Where do I place this script in my html?
I verified none of my mootools is using $j()
Very frustrated.
Any help is greatly appreciated.
Erik
On Jan 20, 2009, at 9:42 AM, WhoButSB wrote:
$j
--
---
Steve Barbera
whobu...@gmail.com
[jQuery] Re: Conflict with Mootools...
I eliminated some unnecessary scripts.
This is what i have now:
script type=text/javascript src=/src/js/mootools/1.2.1/core.js/
script
script type=text/javascript src=/src/js/mootools/1.2.1/more.js/
script
script type=text/javascript src=/src/js/mootools/barack/
morphlist.js/script
script type=text/javascript src=/src/js/mootools/barack/
barackslideshow.js/script
script type=text/javascript src=/src/js/mootools/barack/demo.js/
script
script type=text/javascript src=/src/js/jquery/
jquery-1.2.6.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.easing.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.lavalamp.min.js/script
script type=text/javascript
$j(document).ready(function(){
$j(:text).labelify();
});
/script
script type=text/javascript
$j(function() {
$j(#1, #2, #3).lavaLamp({
fx: backout,
speed: 800,
click: function(event, menuItem) {
return false;
}
});
});
/script
script type=text/javascript
function change(id,newtext)
{
document.getElementById(id).innerHTML=newtext
}
/script
script type=text/javascriptvar $j = jQuery.noConflict();/script
I search for all $( and replaced it with $j(.
MY JQUERY LAVALAMP IS NOW NOT WORKING.
Frustrated!
Erik
On Jan 20, 2009, at 1:49 PM, Steven Barbera wrote:
script type=text/javascriptvar $j = jQuery.noConflict();/script
[jQuery] Re: Conflict with Mootools...
Like this?
script type=text/javascript src=/src/js/jquery/
jquery-1.2.6.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.easing.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.lavalamp.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.lavalamp.js/scriptscript type=text/javascriptvar $j =
jQuery.noConflict();/script
script type=text/javascript
$(function() {
$(#1, #2, #3).lavaLamp({
fx: backout,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
/script
script type=text/javascript
$(document).ready(function(){
$(:text).labelify();
});
/script
script type=text/javascript
function change(id,newtext)
{
document.getElementById(id).innerHTML=newtext
}
/script
/head
body
script type=text/javascriptvar $j = jQuery.noConflict();/script
On Jan 20, 2009, at 2:01 PM, Steven Barbera wrote:
Oooh, make sure you put the jQuery.noConflict() code at the top
right after the lavalamp.min.js code. Also make sure you add the
script tags around it.
Steve
On Tue, Jan 20, 2009 at 1:58 PM, Erik R. Peterson eriks...@mac.com
wrote:
I eliminated some unnecessary scripts.
This is what i have now:
script type=text/javascript src=/src/js/mootools/1.2.1/
core.js/script
script type=text/javascript src=/src/js/mootools/1.2.1/
more.js/script
script type=text/javascript src=/src/js/mootools/barack/
morphlist.js/script
script type=text/javascript src=/src/js/mootools/barack/
barackslideshow.js/script
script type=text/javascript src=/src/js/mootools/barack/
demo.js/script
script type=text/javascript src=/src/js/jquery/
jquery-1.2.6.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.easing.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.lavalamp.min.js/script
script type=text/javascript
$j(document).ready(function(){
$j(:text).labelify();
});
/script
script type=text/javascript
$j(function() {
$j(#1, #2, #3).lavaLamp({
fx: backout,
speed: 800,
click: function(event, menuItem) {
return false;
}
});
});
/script
script type=text/javascript
function change(id,newtext)
{
document.getElementById(id).innerHTML=newtext
}
/script
script type=text/javascriptvar $j = jQuery.noConflict();/script
I search for all $( and replaced it with $j(.
MY JQUERY LAVALAMP IS NOW NOT WORKING.
Frustrated!
Erik
On Jan 20, 2009, at 1:49 PM, Steven Barbera wrote:
script type=text/javascriptvar $j = jQuery.noConflict();/script
--
---
Steve Barbera
whobu...@gmail.com
[jQuery] Re: Conflict with Mootools...
Guess what!! I got it to work!! Very nice
I feel like I parted the sea like moses
thanks.
Erik
On Jan 20, 2009, at 2:01 PM, Steven Barbera wrote:
Oooh, make sure you put the jQuery.noConflict() code at the top
right after the lavalamp.min.js code. Also make sure you add the
script tags around it.
Steve
On Tue, Jan 20, 2009 at 1:58 PM, Erik R. Peterson eriks...@mac.com
wrote:
I eliminated some unnecessary scripts.
This is what i have now:
script type=text/javascript src=/src/js/mootools/1.2.1/
core.js/script
script type=text/javascript src=/src/js/mootools/1.2.1/
more.js/script
script type=text/javascript src=/src/js/mootools/barack/
morphlist.js/script
script type=text/javascript src=/src/js/mootools/barack/
barackslideshow.js/script
script type=text/javascript src=/src/js/mootools/barack/
demo.js/script
script type=text/javascript src=/src/js/jquery/
jquery-1.2.6.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.easing.min.js/script
script type=text/javascript src=/src/js/jquery/lavalamp/
jquery.lavalamp.min.js/script
script type=text/javascript
$j(document).ready(function(){
$j(:text).labelify();
});
/script
script type=text/javascript
$j(function() {
$j(#1, #2, #3).lavaLamp({
fx: backout,
speed: 800,
click: function(event, menuItem) {
return false;
}
});
});
/script
script type=text/javascript
function change(id,newtext)
{
document.getElementById(id).innerHTML=newtext
}
/script
script type=text/javascriptvar $j = jQuery.noConflict();/script
I search for all $( and replaced it with $j(.
MY JQUERY LAVALAMP IS NOW NOT WORKING.
Frustrated!
Erik
On Jan 20, 2009, at 1:49 PM, Steven Barbera wrote:
script type=text/javascriptvar $j = jQuery.noConflict();/script
--
---
Steve Barbera
whobu...@gmail.com
[jQuery] Load External an DIV within the same DIV.. without tabs
Without using TABS, can I place links inside a DIV and replace the same DIV with external content from another DIV? I'm trying to achieve the effect found in this link using iFrames, but I DON'T want to use iFrames: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm Is there an easy way with jquery? Thank you. Erik
[jQuery] Interactive USA maps....
Anyone now of any interactive maps without FLASH? I want to be able to highlight states with color changes loading external DIV content. Erik
[jQuery] Drop Shadows!!!
Hi everyone.. Is the jquery drop shadow worth using? Can anyone direct me ofr the quickest solution. many thanks Erik
[jQuery] Rond Corners Question....
Hi Guys! Is the Round Corners script with Jquery worth using? Does it really work with all browsers? Does is need tweeking from the original install? Any opinions out there? Erik
[jQuery] jQuery Cycle Plugin precode is appearing inside DIV's
I'm using DIV's and I can't figure out how to remove the html text from the inside DIV from the last slide. I've tried everything. When I remove the precode outside the DIV, the script won't work!! http://www.enaturalskin.com The Main Banner. Erik
[jQuery] Cycle Plugin Help - Image Anchors
Is it possible to use image rollovers instead of the default text that comes with the plugin?
[jQuery] Cycle Plugin Help - Image Anchors
Is it possible to use image rollovers instead of the default text that comes with the plugin? http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
I'm confused. these are images from the slides being used in the Cycle.
What if I wanted to use GIF's that are not related to the images?
Would something like this work in the CSS?
#nav a {width:27px; height:27px; padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 10px;background: url('/img/slides/bullet_1.gif')
no-repeat; cursor: pointer; }
#nav a.activeSlide {height:21px;background-position: -27px;}
#nav a:focus{width:27px; outline: none; cursor: pointer;}
#nav img {width:27px; height:21px; padding: 10px 10px 10px 10px;
border: none; display: block; cursor: pointer; }
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the examples some more, there's quite a few of them
with image rollovers. Then look through the options API and see how
to customize them to do almost whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default text
that comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
Could you take a look at my page?
http://www.enaturalskin.com
Erik
On Jun 26, 2009, at 6:31 PM, Charlie wrote:
I did one similar to what you are trying to do using looped slider .
I wanted the pagination images , which were different than the slide
images, to do a hover type effect of highlighting the active one.
I put an image directly into the a tag and the corresponding off
image in background. Set display:none for the foreground images.
Paginator adds an ActiveClass and for that set display:block on
image so the highlighted image would show
Should be fairly easy to do same in cycle using the event options to
trigger add remove class
Erik R. Peterson wrote:
I'm confused. these are images from the slides being used in the
Cycle.
What if I wanted to use GIF's that are not related to the images?
Would something like this work in the CSS?
#nav a {width:27px; height:27px; padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 10px;background: url('/img/slides/
bullet_1.gif') no-repeat; cursor: pointer; }
#nav a.activeSlide {height:21px;background-position: -27px;}
#nav a:focus {width:27px; outline: none; cursor: pointer;}
#nav img {width:27px; height:21px; padding: 10px 10px 10px 10px;
border: none; display: block; cursor: pointer; }�
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the examples some more, there's quite a few of them
with image rollovers. Then look through the options API and see
how to customize them to do almost whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default text
that comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
Thank you... Your suggestion... Will it remove the numbers?
Erik
On Jun 26, 2009, at 9:16 PM, Charlie wrote:
take a look at this demo http://malsup.com/jquery/cycle/goto2.html
would this work better for you? Change the inputs to a ul and
insert your images? Add functions to change class on active image if
you want to do any css to active pager image. I'm pretty sure you
can use options before and after to put in a function like
toggleClass() to change css on active image
Another way to go is modify this demo
http://malsup.com/jquery/cycle/pager7.html
Make an array or index function of your images source and change the
image source for pager from:
slide.src
to something like myImageSource[idx]
combining various demo concepts and functions is the way to look at
what you are trying to do
Erik R. Peterson wrote:
Could you take a look at my page?
http://www.enaturalskin.com
Erik
On Jun 26, 2009, at 6:31 PM, Charlie wrote:
I did one similar to what you are trying to do using looped
slider . I wanted the pagination images , which were different
than the slide images, to do a hover type effect of highlighting
the active one.
I put an image directly into the a tag and the corresponding off
image in background. Set display:none for the foreground images.
Paginator adds an ActiveClass and for that set display:block on
image so the highlighted image would show
Should be fairly easy to do same in cycle using the event options
to trigger add remove class
Erik R. Peterson wrote:
I'm confused. these are images from the slides being used in the
Cycle.
What if I wanted to use GIF's that are not related to the images?
Would something like this work in the CSS?
#nav a {width:27px; height:27px; padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 10px;background: url('/img/slides/
bullet_1.gif') no-repeat; cursor: pointer; }
#nav a.activeSlide {height:21px;background-position: -27px;}
#nav a:focus {width:27px; outline: none; cursor: pointer;}
#nav img {width:27px; height:21px; padding: 10px 10px 10px 10px;
border: none; display: block; cursor: pointer; }�
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the examples some more, there's quite a few of them
with image rollovers. Then look through the options API and see
how to customize them to do almost whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default
text that comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
Auuugh! This is so frustrating.. I can't get this to work.
Erik
On Jun 26, 2009, at 9:16 PM, Charlie wrote:
take a look at this demo http://malsup.com/jquery/cycle/goto2.html
would this work better for you? Change the inputs to a ul and
insert your images? Add functions to change class on active image if
you want to do any css to active pager image. I'm pretty sure you
can use options before and after to put in a function like
toggleClass() to change css on active image
Another way to go is modify this demo
http://malsup.com/jquery/cycle/pager7.html
Make an array or index function of your images source and change the
image source for pager from:
slide.src
to something like myImageSource[idx]
combining various demo concepts and functions is the way to look at
what you are trying to do
Erik R. Peterson wrote:
Could you take a look at my page?
http://www.enaturalskin.com
Erik
On Jun 26, 2009, at 6:31 PM, Charlie wrote:
I did one similar to what you are trying to do using looped
slider . I wanted the pagination images , which were different
than the slide images, to do a hover type effect of highlighting
the active one.
I put an image directly into the a tag and the corresponding off
image in background. Set display:none for the foreground images.
Paginator adds an ActiveClass and for that set display:block on
image so the highlighted image would show
Should be fairly easy to do same in cycle using the event options
to trigger add remove class
Erik R. Peterson wrote:
I'm confused. these are images from the slides being used in the
Cycle.
What if I wanted to use GIF's that are not related to the images?
Would something like this work in the CSS?
#nav a {width:27px; height:27px; padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 10px;background: url('/img/slides/
bullet_1.gif') no-repeat; cursor: pointer; }
#nav a.activeSlide {height:21px;background-position: -27px;}
#nav a:focus {width:27px; outline: none; cursor: pointer;}
#nav img {width:27px; height:21px; padding: 10px 10px 10px 10px;
border: none; display: block; cursor: pointer; }�
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the examples some more, there's quite a few of them
with image rollovers. Then look through the options API and see
how to customize them to do almost whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default
text that comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Need to find a query script to achieve this!!!
Please look at this script: http://demos.flesler.com/jquery/localScroll/ajax/ Is it possible to make the window resize vertically based on the div content? Really need help. Erik
[jQuery] Need help on How to load content via AJAX in jQuery
I found this script: http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/ I got it working, but it really looks bad in IE, along with erros. Any alternatives or sugestions? Here is my page: http://www.enaturalskin.com/needhelp.htm Many thanks. Erik
[jQuery] Re: Need help on How to load content via AJAX in jQuery
Hi buddy! I'm undecided on the final buttons and graphics, but thanks to your help I got the script down. I actually fixed my own problem after posted this last email. Have a great weekend. Erik On Jul 3, 2009, at 5:14 PM, Cesar Sanz wrote: Hello. I see you succed retrieving data using ajax, Which is the problem? - Original Message - From: Erik R. Peterson eriks...@mac.com To: jquery-en@googlegroups.com Sent: Friday, July 03, 2009 2:48 PM Subject: [jQuery] Need help on How to load content via AJAX in jQuery I found this script: http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/ I got it working, but it really looks bad in IE, along with erros. Any alternatives or sugestions? Here is my page: http://www.enaturalskin.com/needhelp.htm Many thanks. Erik
[jQuery] Re: Need help on How to load content via AJAX in jQuery
Can;t get it to work correctly.
Here is my existing code:
$(document).ready(function(){
//References
var sections = $(#cs_links a);
var loading = $(#loading);
var content = $(#cst_wrap_mid);
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case js_appoint:
content.slideUp();
content.load(/externals/appoint.htm,
hideLoading);
content.slideDown();
break;
case js_contact:
content.slideUp();
content.load(/externals/contact.htm,
hideLoading);
content.slideDown();
break;
case js_gifts:
content.slideUp();
content.load(/externals/gifts.htm,
hideLoading);
content.slideDown();
break;
case js_order:
content.slideUp();
content.load(/externals/order.htm,
hideLoading);
content.slideDown();
break;
case js_promise:
content.slideUp();
content.load(/externals/promise.htm,
hideLoading);
content.slideDown();
break;
case js_quest:
content.slideUp();
content.load(/externals/quest.htm,
hideLoading);
content.slideDown();
break;
case js_returns:
content.slideUp();
content.load(/externals/returns.htm,
hideLoading);
content.slideDown();
break;
case js_secure:
content.slideUp();
content.load(/externals/secure.htm,
hideLoading);
content.slideDown();
break;
case js_shipping:
content.slideUp();
content.load(/externals/shipping.htm,
hideLoading);
content.slideDown();
break;
case js_terms:
content.slideUp();
content.load(/externals/terms.htm,
hideLoading);
content.slideDown();
break;
case js_types:
content.slideUp();
content.load(/externals/types.htm,
hideLoading);
content.slideDown();
break;
default:
//hide loading bar if there is no selected
section
hideLoading();
break;
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:visible})
.css({opacity:1})
.css({display:block})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
On Jul 4, 2009, at 6:40 AM, MOZ wrote:
Hi,
on your page: http://www.enaturalskin.com/needhelp.htm
each time the window scroll to the top because of anchor #, use
preventDefault(); to avoid this, just a suggestion.
Also see the improved version:
http://yensdesign.com/2009/06/safe-ajax-links-using-jquery/
This trick will make your website work though there is no javascript.
-Beschi.
On Jul 4, 4:14 am, Erik R. Peterson eriks...@mac.com wrote:
Hi buddy!
I'm undecided on the final buttons and graphics, but thanks to your
help I got the script down.
I actually fixed my own problem after posted this last email.
Have a great weekend.
Erik
On Jul 3, 2009, at 5:14 PM, Cesar Sanz wrote:
Hello.
I see you succed retrieving data using ajax,
Which is the problem?
- Original Message - From: Erik R. Peterson
[jQuery] Re: Need help on How to load content via AJAX in jQuery
Works great... Would you be able to show me how to make the links change via css after selected? Erik On Jul 4, 2009, at 6:40 AM, MOZ wrote: Hi, on your page: http://www.enaturalskin.com/needhelp.htm each time the window scroll to the top because of anchor #, use preventDefault(); to avoid this, just a suggestion. Also see the improved version: http://yensdesign.com/2009/06/safe-ajax-links-using-jquery/ This trick will make your website work though there is no javascript. -Beschi. On Jul 4, 4:14 am, Erik R. Peterson eriks...@mac.com wrote: Hi buddy! I'm undecided on the final buttons and graphics, but thanks to your help I got the script down. I actually fixed my own problem after posted this last email. Have a great weekend. Erik On Jul 3, 2009, at 5:14 PM, Cesar Sanz wrote: Hello. I see you succed retrieving data using ajax, Which is the problem? - Original Message - From: Erik R. Peterson eriks...@mac.com To: jquery-en@googlegroups.com Sent: Friday, July 03, 2009 2:48 PM Subject: [jQuery] Need help on How to load content via AJAX in jQuery I found this script: http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/ I got it working, but it really looks bad in IE, along with erros. Any alternatives or sugestions? Here is my page: http://www.enaturalskin.com/needhelp.htm Many thanks. Erik
[jQuery] Re: Need help on How to load content via AJAX in jQuery
Thanks Charlie,
I'll put it in now. thanks.
E
On Jul 4, 2009, at 9:56 AM, Charlie wrote:
could shorten this all up and make it accessible for javascript
disabled by putting the url into the href of your links.
Haven't looked at plugin but since you're just loading html will use
load() in jQuery core:
hideLoading();
$(#cs_links a).click(function () {
showLoading();
$(#cst_wrap_mid).slideUp();
$(#cst_wrap_mid).load($(this).attr(href), function(){
$(#cst_wrap_mid).slideUp();
hideLoading();
});
return false;
});
This would replace all of the switch cases. If javascript disabled
appropriate page would open from href. Likely find that load is very
fast and showloading may not be necessary
Erik R. Peterson wrote:
Can;t get it to work correctly.
Here is my existing code:
$(document).ready(function(){
//References
var sections = $(#cs_links a);
var loading = $(#loading);
var content = $(#cst_wrap_mid);
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case js_appoint:
content.slideUp();
content.load(/externals/appoint.htm, hideLoading);
content.slideDown();
break;
case js_contact:
content.slideUp();
content.load(/externals/contact.htm, hideLoading);
content.slideDown();
break;
case js_gifts:
content.slideUp();
content.load(/externals/gifts.htm, hideLoading);
content.slideDown();
break;
case js_order:
content.slideUp();
content.load(/externals/order.htm, hideLoading);
content.slideDown();
break;
case js_promise:
content.slideUp();
content.load(/externals/promise.htm, hideLoading);
content.slideDown();
break;
case js_quest:
content.slideUp();
content.load(/externals/quest.htm, hideLoading);
content.slideDown();
break;
case js_returns:
content.slideUp();
content.load(/externals/returns.htm, hideLoading);
content.slideDown();
break;
case js_secure:
content.slideUp();
content.load(/externals/secure.htm, hideLoading);
content.slideDown();
break;
case js_shipping:
content.slideUp();
content.load(/externals/shipping.htm, hideLoading);
content.slideDown();
break;
case js_terms:
content.slideUp();
content.load(/externals/terms.htm, hideLoading);
content.slideDown();
break;
case js_types:
content.slideUp();
content.load(/externals/types.htm, hideLoading);
content.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:visible})
.css({opacity:1})
.css({display:block})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
On Jul 4, 2009, at 6:40 AM, MOZ wrote:
Hi,
on your page: http://www.enaturalskin.com/needhelp.htm
each time the window scroll to the top because of anchor #, use
preventDefault(); to avoid this, just a suggestion.
Also see the improved version:
http://yensdesign.com/2009/06/safe-ajax-links-using-jquery/
This trick will make your website work though there is no
javascript.
-Beschi.
On Jul 4, 4:14 am, Erik R. Peterson eriks...@mac.com wrote:
Hi buddy!
I'm undecided on the final buttons and graphics, but thanks to your
help I got the script down.
I actually fixed my own problem after posted this last email.
Have a great weekend.
Erik
On Jul 3, 2009, at 5:14 PM, Cesar Sanz wrote:
Hello.
I see you succed retrieving data using ajax,
Which is the problem?
- Original Message - From: Erik R. Peterson
eriks...@mac.com
To: jquery-en@googlegroups.com
Sent: Friday, July 03, 2009 2:48 PM
Subject: [jQuery] Need help on How to load content via AJAX in
jQuery
I found this script:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
I got it working, but it really looks bad in IE, along with
erros.
Any alternatives or sugestions?
Here is my page: http://www.enaturalskin.com/needhelp.htm
Many thanks.
Erik
[jQuery] Re: Need help on How to load content via AJAX in jQuery
Where am I placing the link for each tag? Are the link identified in
the JS or the html?
E
On Jul 4, 2009, at 10:18 AM, Charlie wrote:
I gave you slideUp twice...oops...bad copy paste
Erik R. Peterson wrote:
Thanks Charlie,
I'll put it in now. thanks.
E
On Jul 4, 2009, at 9:56 AM, Charlie wrote:
could shorten this all up and make it accessible for javascript
disabled by putting the url into the href of your links.
Haven't looked at plugin but since you're just loading html will
use load() in jQuery core:
hideLoading();
$(#cs_links a).click(function () {
showLoading();
$(#cst_wrap_mid).slideUp();
$(#cst_wrap_mid).load($(this).attr(href), function(){
$(#cst_wrap_mid).slideUp();
hideLoading();
});
return false;
});
This would replace all of the switch cases. If javascript disabled
appropriate page would open from href. Likely find that load is
very fast and showloading may not be necessary
Erik R. Peterson wrote:
Can;t get it to work correctly.
Here is my existing code:
$(document).ready(function(){
//References
var sections = $(#cs_links a);
var loading = $(#loading);
var content = $(#cst_wrap_mid);
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case js_appoint:
content.slideUp();
content.load(/externals/appoint.htm,
hideLoading);
content.slideDown();
break;
case js_contact:
content.slideUp();
content.load(/externals/contact.htm,
hideLoading);
content.slideDown();
break;
case js_gifts:
content.slideUp();
content.load(/externals/gifts.htm, hideLoading);
content.slideDown();
break;
case js_order:
content.slideUp();
content.load(/externals/order.htm, hideLoading);
content.slideDown();
break;
case js_promise:
content.slideUp();
content.load(/externals/promise.htm,
hideLoading);
content.slideDown();
break;
case js_quest:
content.slideUp();
content.load(/externals/quest.htm, hideLoading);
content.slideDown();
break;
case js_returns:
content.slideUp();
content.load(/externals/returns.htm,
hideLoading);
content.slideDown();
break;
case js_secure:
content.slideUp();
content.load(/externals/secure.htm, hideLoading);
content.slideDown();
break;
case js_shipping:
content.slideUp();
content.load(/externals/shipping.htm,
hideLoading);
content.slideDown();
break;
case js_terms:
content.slideUp();
content.load(/externals/terms.htm, hideLoading);
content.slideDown();
break;
case js_types:
content.slideUp();
content.load(/externals/types.htm, hideLoading);
content.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:visible})
.css({opacity:1})
.css({display:block})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
On Jul 4, 2009, at 6:40 AM, MOZ wrote:
Hi,
on your page: http://www.enaturalskin.com/needhelp.htm
each time the window scroll to the top because of anchor #, use
preventDefault(); to avoid this, just a suggestion.
Also see the improved version:
http://yensdesign.com/2009/06/safe-ajax-links-using-jquery/
This trick will make your website work though there is no
javascript.
-Beschi.
On Jul 4, 4:14 am, Erik R. Peterson eriks...@mac.com wrote:
Hi buddy!
I'm undecided on the final buttons and graphics, but thanks to
your
help I got the script down.
I actually fixed my own problem after posted this last email.
Have a great weekend.
Erik
On Jul 3, 2009, at 5:14 PM, Cesar Sanz wrote:
Hello.
I see you succed retrieving data using ajax,
Which is the problem?
- Original Message - From: Erik R. Peterson
eriks...@mac.com
To: jquery-en@googlegroups.com
Sent: Friday, July 03, 2009 2:48 PM
Subject: [jQuery] Need help on How to load content via AJAX in
jQuery
I found this script:
http
[jQuery] a, hover active
I have two image based links that open external an page in a div.
I am changing the background via hover from the CSS.
My CSS:
#cs_contact {width: 146px; height: 34px; float: left;}
a.cs_contact {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block}
a.cs_contact:hover {background-position: -146px;}
a.cs_contact_a {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block;background-position: -146px;}
#cs_appoint {width: 146px; height: 34px; float: left; margin: 10px
0px 0px 0px}
a.cs_appoint {width: 146px; height: 34px; background: url('/img/
pages/cs_appoint.png'); display:block}
a.cs_appoint:hover {background-position: -146px;}
My JS:
$('.cs_contact').click(function() {
$(this).removeClass(cs_contact);
$(this).addClass(cs_contact_a);
});
My HTML:
div id=cs_links
div id=cs_contact
a class=cs_contact id=js_contact href=#/a/div
div id=cs_appoint
a class=cs_appoint id=js_appoint href=#/a/div
/div
I discovered how to make one image link ACTIVE via js, but I don't
know how to make the two links toggle with each other. I can only
have ONE LINK active at a time.
I have 10 more image links to add to this page.
Many thanks.
Erik
[jQuery] Re: a, hover active
Still doesn't work.
Page: http://www.enaturalskin.com/needhelp.htm
I placed your script:
var obj = $(.cs_links);
var items = $(.cs_contact, obj);
$(.cs_contact).click(function() {
var current = items.index($(this));
items.removeClass(active);
items.eq(current).addClass(active);
});
All of my image-based links are inside a div id=cs_links/div.
The hover works, but no ACTIVE.
Just using two links, is it possible to have ONE active once clicked?
My CSS:
#cs_contact {width: 146px; height: 34px; float: left;}
a.cs_contact {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block}
a.cs_contact:hover {background-position: -146px;}
a.cs_contact_a {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block;background-position: -146px;}
#cs_appoint {width: 146px; height: 34px; float: left; margin: 10px
0px 0px 0px}
a.cs_appoint {width: 146px; height: 34px; background: url('/img/
pages/cs_appoint.png'); display:block}
a.cs_appoint:hover {background-position: -146px;}
My HTML:
div id=cs_links
div id=cs_contact
a class=cs_contact id=js_contact href=#/a/div
div id=cs_appoint
a class=cs_appoint id=js_appoint href=#/a/div
/div
I'm confused on the toggle approach.
Still a novice programmer, but learning fast.
Many thanks for all the help.
Erik
On Jul 5, 2009, at 4:55 AM, waseem sabjee wrote:
// this is our object refference point. we only want to effect
elements within this object
var obj = $(.cs_links);
// we now need a refference point for each item
// the , obj means we only want items within our object
var items = $(.cs_contact, obj);
// click function
$(.cs_contact).click(function() {
var current = items.index($(this)); // get the .eq() of the item
clicked
// remove the active class from all items
items.removeClass(active);
// set clicked item to active
items.eq(current).addClass(active);
});
[jQuery] Re: a, hover active
I went ahead and placed the script but still no success. Could my CSS
be an issue here?
Erik
On Jul 5, 2009, at 8:10 AM, waseem sabjee wrote:
ok. replace your js with the following (all the js)
$(function() { // similar to $(document).read() {
var obj = $(.cs_links);
var items = $(.cs_contact, obj);
items.click(function(e) {
e.preventDefault();
var current = items.index($(this));
items.removelass(active);
items.eq(current).addClass(active);
});
});
you can call the above a test.
make sure the active class is being added correctly to the element
then try the rest of your scripts
the error you are getting is because you put te
$(function() {
});
within the
$(document).ready(function(){
});
you cant embed one in the other
you can choose to either use
$(document).ready(function(){
or
$(function() {
On Sun, Jul 5, 2009 at 1:27 PM, Erik R. Peterson eriks...@mac.com
wrote:
Still doesn't work.
Page: http://www.enaturalskin.com/needhelp.htm
I placed your script:
var obj = $(.cs_links);
var items = $(.cs_contact, obj);
$(.cs_contact).click(function() {
var current = items.index($(this));
items.removeClass(active);
items.eq(current).addClass(active);
});
All of my image-based links are inside a div id=cs_links/div.
The hover works, but no ACTIVE.
Just using two links, is it possible to have ONE active once clicked?
My CSS:
#cs_contact {width: 146px; height: 34px; float: left;}
a.cs_contact {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block}
a.cs_contact:hover {background-position: -146px;}
a.cs_contact_a {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block;background-position: -146px;}
#cs_appoint {width: 146px; height: 34px; float: left; margin: 10px
0px 0px 0px}
a.cs_appoint {width: 146px; height: 34px; background: url('/img/
pages/cs_appoint.png'); display:block}
a.cs_appoint:hover {background-position: -146px;}
My HTML:
div id=cs_links
div id=cs_contact
a class=cs_contact id=js_contact href=#/a/div
div id=cs_appoint
a class=cs_appoint id=js_appoint href=#/a/div
/div
I'm confused on the toggle approach.
Still a novice programmer, but learning fast.
Many thanks for all the help.
Erik
On Jul 5, 2009, at 4:55 AM, waseem sabjee wrote:
// this is our object refference point. we only want to effect
elements within this object
var obj = $(.cs_links);
// we now need a refference point for each item
// the , obj means we only want items within our object
var items = $(.cs_contact, obj);
// click function
$(.cs_contact).click(function() {
var current = items.index($(this)); // get the .eq() of the item
clicked
// remove the active class from all items
items.removeClass(active);
// set clicked item to active
items.eq(current).addClass(active);
});
[jQuery] Re: a, hover active
Wow.. this one is really kicking me!
http://www.enaturalskin.com/needhelp.htm
I placed the code and updated my CSS, but no go...
So far this is what I have:
CSS:
#cs_links {width: 146px; float: left;
margin:5px 0px 0px 25px}
#cs_links a:hover, .active {background-position: -146px;}
#cs_contact {width: 146px; height: 34px; float:
left;}
a.cs_contact{width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block}
#cs_appoint{width: 146px; height: 34px; float: left; margin: 10px
0px 0px 0px}
a.cs_appoint{width: 146px; height: 34px; background: url('/img/
pages/cs_appoint.png'); display:block}
JS:
script type=text/javascript
$(document).ready(function(){
$(#cs_links a).click(function() {
$(.active).removeClass(active);
$(this).addClass(active);
return false;
});
HTML:
div id=cs_links
div id=cs_contact
a id=js_contact class=cs_contact href=#/a/div
etc.
On Jul 5, 2009, at 9:25 AM, Charlie wrote:
typo, left out a bracket
$(#cs_links a).click(function() {
$(.active).removeClass(active);
$(this).addClass(active);
return false;
});
Charlie wrote:
From what I see all your image links do exact same shift of
background image on hover and active. You used a different class
for each link to assign indiividual background images, however you
don't need to create a new class for each link just to shift the
background since they all shift same amount. You can chain CSS
similar to chaining jQuery also.
CSS:
#cs_links a:hover, .active {background-position: -146px;}
//this one rule will replace the 11 rules you are going to create
( one for each link and one for active)
JS:
//inside document.ready
$(#cs_links a.click(function() {
$(.active).removeClass(active);
$(this).addClass(active);
return false;
});
Erik R. Peterson wrote:
I went ahead and placed the script but still no success. Could my
CSS be an issue here?
Erik
On Jul 5, 2009, at 8:10 AM, waseem sabjee wrote:
ok. replace your js with the following (all the js)
$(function() { // similar to $(document).read() {
var obj = $(.cs_links);
var items = $(.cs_contact, obj);
items.click(function(e) {
e.preventDefault();
var current = items.index($(this));
items.removelass(active);
items.eq(current).addClass(active);
});
});
you can call the above a test.
make sure the active class is being added correctly to the element
then try the rest of your scripts
the error you are getting is because you put te
$(function() {
});
within the
$(document).ready(function(){
});
you cant embed one in the other
you can choose to either use
$(document).ready(function(){
or
$(function() {
On Sun, Jul 5, 2009 at 1:27 PM, Erik R. Peterson
eriks...@mac.com wrote:
Still doesn't work.
Page: http://www.enaturalskin.com/needhelp.htm
I placed your script:
var obj = $(.cs_links);
var items = $(.cs_contact, obj);
$(.cs_contact).click(function() {
var current = items.index($(this));
items.removeClass(active);
items.eq(current).addClass(active);
});
All of my image-based links are inside a div id=cs_links/
div. The hover works, but no ACTIVE.
Just using two links, is it possible to have ONE active once
clicked?
My CSS:
#cs_contact {width: 146px; height: 34px; float: left;}
a.cs_contact {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block}
a.cs_contact:hover {background-position: -146px;}
a.cs_contact_a {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block;background-position: -146px;}
#cs_appoint {width: 146px; height: 34px; float: left; margin:
10px 0px 0px 0px}
a.cs_appoint {width: 146px; height: 34px; background: url('/img/
pages/cs_appoint.png'); display:block}
a.cs_appoint:hover {background-position: -146px;}
My HTML:
div id=cs_links
div id=cs_contact
a class=cs_contact id=js_contact href=#/a/div
div id=cs_appoint
a class=cs_appoint id=js_appoint href=#/a/div
/div
I'm confused on the toggle approach.
Still a novice programmer, but learning fast.
Many thanks for all the help.
Erik
On Jul 5, 2009, at 4:55 AM, waseem sabjee wrote:
// this is our object refference point. we only want to effect
elements within this object
var obj = $(.cs_links);
// we now need a refference point for each item
// the , obj means we only want items within our object
var items = $(.cs_contact, obj);
// click function
$(.cs_contact).click(function() {
var current = items.index($(this)); // get the .eq() of the
item clicked
// remove the active class from all items
items.removeClass(active);
// set clicked item to active
items.eq(current).addClass(active);
});
[jQuery] Re: a, hover active
I have the fixed version pasted inside the html.
I'm still getting a error when I click on the first link:
Line 22 is: $(this).addClass(active);
[Exception... Could not convert JavaScript argument arg 0
[nsIDOMViewCSS.getComputedStyle] nsresult: 0x80570009
(NS_ERROR_XPC_BAD_CONVERT_JS) location: JS frame :: http://www.enaturalskin.com/src/js/jquery/core/jquery-1.2.6.min.js
:: anonymous :: line 22 data: no]
http://www.enaturalskin.com/src/js/jquery/core/jquery-1.2.6.min.js
Line 22
On Jul 5, 2009, at 11:44 AM, Charlie wrote:
you put typo version on page with missing bracket, my bad but I did
try to fix it. Throws erreor also in Firebug, if you open Firebug,
paste that JS right into console and click run, you can see the
active class get added when you do test click. Click another link,
see the first active disappear, new active added.
Erik R. Peterson wrote:
Wow.. this one is really kicking me!
http://www.enaturalskin.com/needhelp.htm
I placed the code and updated my CSS, but no go...
So far this is what I have:
CSS:
#cs_links {width: 146px; float: left; margin:5px 0px 0px 25px}
#cs_links a:hover, .active {background-position: -146px;}
#cs_contact {width: 146px; height: 34px; float: left;}
a.cs_contact {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block}
#cs_appoint {width: 146px; height: 34px; float: left; margin: 10px
0px 0px 0px}
a.cs_appoint {width: 146px; height: 34px; background: url('/img/
pages/cs_appoint.png'); display:block}�
JS:
script type=text/javascript
$(document).ready(function(){
$(#cs_links a).click(function() {
$(.active).removeClass(active);
$(this).addClass(active);
return false;
});
HTML:
div id=cs_links
div id=cs_contact
a id=js_contact class=cs_contact href=#/a/div
etc.
On Jul 5, 2009, at 9:25 AM, Charlie wrote:
typo, left out a bracket
$(#cs_links a).click(function() {
$(.active).removeClass(active);
$(this).addClass(active);
return false;
});
Charlie wrote:
From what I see all your image links do exact same shift of
background image on hover and active. You used a different class
for each link to assign indiividual background images, however
you don't need to create a new class for each link just to shift
the background since they all shift same amount. You can chain
CSS similar to chaining jQuery also.
CSS:
#cs_links a:hover, .active {background-position: -146px;}
//this one rule will replace the 11 rules you are going to create
( one for each link and one for active)
JS:
//inside document.ready
$(#cs_links a.click(function() {
$(.active).removeClass(active);
$(this).addClass(active);
return false;
});
Erik R. Peterson wrote:
I went ahead and placed the script but still no success. Could
my CSS be an issue here?
Erik
On Jul 5, 2009, at 8:10 AM, waseem sabjee wrote:
ok. replace your js with the following (all the js)
$(function() { // similar to $(document).read() {
var obj = $(.cs_links);
var items = $(.cs_contact, obj);
items.click(function(e) {
e.preventDefault();
var current = items.index($(this));
items.removelass(active);
items.eq(current).addClass(active);
});
});
you can call the above a test.
make sure the active class is being added correctly to the
element
then try the rest of your scripts
the error you are getting is because you put te
$(function() {
});
within the
$(document).ready(function(){
});
you cant embed one in the other
you can choose to either use
$(document).ready(function(){
or
$(function() {
On Sun, Jul 5, 2009 at 1:27 PM, Erik R. Peterson eriks...@mac.com
wrote:
Still doesn't work.
Page: http://www.enaturalskin.com/needhelp.htm
I placed your script:
var obj = $(.cs_links);
var items = $(.cs_contact, obj);
$(.cs_contact).click(function() {
var current = items.index($(this));
items.removeClass(active);
items.eq(current).addClass(active);
});
All of my image-based links are inside a div id=cs_links/
div. The hover works, but no ACTIVE.
Just using two links, is it possible to have ONE active once
clicked?
My CSS:
#cs_contact {width: 146px; height: 34px; float: left;}
a.cs_contact {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block}
a.cs_contact:hover {background-position: -146px;}
a.cs_contact_a {width: 146px; height: 34px; background: url('/
img/pages/cs_contact.png'); display:block;background-position:
-146px;}
#cs_appoint {width: 146px; height: 34px; float: left; margin:
10px 0px 0px 0px}
a.cs_appoint {width: 146px; height: 34px; background: url('/img/
pages/cs_appoint.png'); display:block}
a.cs_appoint:hover {background-position: -146px;}
My HTML:
div id=cs_links
div id=cs_contact
a class=cs_contact id=js_contact href=#/a/div
div id=cs_appoint
a class=cs_appoint id
[jQuery] Re: a, hover active
Thanks. Upgrade didn't work.. I feel I'm so close.
Erik
On Jul 5, 2009, at 2:23 PM, Charlie wrote:
using older version jQuery 1.2.6 see what happens if upgrade
script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
/script.
another thing to consider is you are using 2 click events on your
links. You have one click event scripted for loading content,
another for switching class, might be better to consolidate into
one. I really don't know the impact of the 2 events but it may be
cause of problems, not sure. Certainly not as efficient as combining
into 1
Erik R. Peterson wrote:
I have the fixed version pasted inside the html.
I'm still getting a error when I click on the first link:
Line 22 is: $(this).addClass(active);
[Exception... Could not convert JavaScript argument arg 0
[nsIDOMViewCSS.getComputedStyle] nsresult: 0x80570009
(NS_ERROR_XPC_BAD_CONVERT_JS) location: JS frame :: http://www.enaturalskin.com/src/js/jquery/core/jquery-1.2.6.min.js
:: anonymous :: line 22 data: no]
http://www.enaturalskin.com/src/js/jquery/core/jquery-1.2.6.min.js
Line 22
On Jul 5, 2009, at 11:44 AM, Charlie wrote:
you put typo version on page with missing bracket, my bad but I
did try to fix it. Throws erreor also in Firebug, if you open
Firebug, paste that JS right into console and click run, you can
see the active class get added when you do test click. Click
another link, see the first active disappear, new active added.
Erik R. Peterson wrote:
Wow.. this one is really kicking me!
http://www.enaturalskin.com/needhelp.htm
I placed the code and updated my CSS, but no go...
So far this is what I have:
CSS:
#cs_links {width: 146px; float: left; margin:5px 0px 0px 25px}
#cs_links a:hover, .active {background-position: -146px;}
#cs_contact {width: 146px; height: 34px; float: left;}
a.cs_contact {width: 146px; height: 34px; background: url('/img/
pages/cs_contact.png'); display:block}
#cs_appoint {width: 146px; height: 34px; float: left; margin:
10px 0px 0px 0px}
a.cs_appoint {width: 146px; height: 34px; background: url('/img/
pages/cs_appoint.png'); display:block}�
JS:
script type=text/javascript
$(document).ready(function(){
$(#cs_links a).click(function() {
$(.active).removeClass(active);
$(this).addClass(active);
return false;
});
HTML:
div id=cs_links
div id=cs_contact
a id=js_contact class=cs_contact href=#/a/div
etc.
On Jul 5, 2009, at 9:25 AM, Charlie wrote:
typo, left out a bracket
$(#cs_links a).click(function() {
$(.active).removeClass(active);
$(this).addClass(active);
return false;
});
Charlie wrote:
From what I see all your image links do exact same shift of
background image on hover and active. You used a different
class for each link to assign indiividual background images,
however you don't need to create a new class for each link just
to shift the background since they all shift same amount. You
can chain CSS similar to chaining jQuery also.
CSS:
#cs_links a:hover, .active {background-position: -146px;}
//this one rule will replace the 11 rules you are going to
create ( one for each link and one for active)
JS:
//inside document.ready
$(#cs_links a.click(function() {
$(.active).removeClass(active);
$(this).addClass(active);
return false;
});
Erik R. Peterson wrote:
I went ahead and placed the script but still no success.
Could my CSS be an issue here?
Erik
On Jul 5, 2009, at 8:10 AM, waseem sabjee wrote:
ok. replace your js with the following (all the js)
$(function() { // similar to $(document).read() {
var obj = $(.cs_links);
var items = $(.cs_contact, obj);
items.click(function(e) {
e.preventDefault();
var current = items.index($(this));
items.removelass(active);
items.eq(current).addClass(active);
});
});
you can call the above a test.
make sure the active class is being added correctly to the
element
then try the rest of your scripts
the error you are getting is because you put te
$(function() {
});
within the
$(document).ready(function(){
});
you cant embed one in the other
you can choose to either use
$(document).ready(function(){
or
$(function() {
On Sun, Jul 5, 2009 at 1:27 PM, Erik R. Peterson eriks...@mac.com
wrote:
Still doesn't work.
Page: http://www.enaturalskin.com/needhelp.htm
I placed your script:
var obj = $(.cs_links);
var items = $(.cs_contact, obj);
$(.cs_contact).click(function() {
var current = items.index($(this));
items.removeClass(active);
items.eq(current).addClass(active);
});
All of my image-based links are inside a div id=cs_links/
div. The hover works, but no ACTIVE.
Just using two links, is it possible to have ONE active once
clicked?
My CSS:
#cs_contact {width: 146px; height: 34px; float: left;}
a.cs_contact {width
[jQuery] Scroll To After AJAX Request...
Any one can help with a script to scroll to the top of the page AFTER an AJAX REQUEST loading a div? Erik
[jQuery] Conflict with jquery two scripts...
Hi everyone,
I'm using two scripts that are conflicting with each other. You ask
why I'm using wo scripts?
One script is used for scrolling to the top of a long page from a
bottom link.
The other script is used for smooth scrolling to local anchors.
I'm using a ajax to load external html within DIV's.
It's funny how they work. The script placed in first order works
making the other script next in line not to work.
Here are my two scripts:
SCRIPT ONE:
function scrollWin(){
$('html, body').animate({
scrollTop: $(#top).offset().top
}, 3000);
}
SCRIPT TWO:
(function($){
$.extend({
smoothAnchors : function(speed, easing, redirect){
speed = speed || slow;
easing = easing || null;
redirect = (redirect === true || redirect == null) ?
true : false;
$(a).each(function(i){
var url = $(this).attr(href);
if(url){
if(url.indexOf(#) != -1
url.indexOf(#) == 0){
var aParts = url.split(#,2);
var anchor =
$(a[name='+aParts[1]+']);
if(anchor){
$(this).click(function(){
if($(document).height()-anchor.offset().top = $(window).height
()
||
anchor.offset().top $(window).height()
|| $(document).width()-anchor.offset().left = $(window).width
()
||
anchor.offset().left $(window).width()){
$('html, body').animate({
scrollTop: anchor.offset().top,
scrollLeft: anchor.offset().left
},
speed, easing, function(){
if(redirect){
window.location = url
}
});
}
return false;
});
}
}
}
});
}
});
})(jQuery);
Any help would be greatly appreciated.
Many thanks.
Erik
[jQuery] Need to modify function to change buttons location
Need help to reposition buttons to a particular DIV within a pageBreak
and Table.
Right now, it's simply placing the buttons under the table.
Can anyone help me figure this out?
Erik
function setButtons(pageBreak){
for (var i = 0; i pageBreak.pages.length; i++) {
for (var j = 0; j
pageBreak.pages[i].childNodes.length; j++) {
if (pageBreak.pages[i].childNodes[j].nodeName ==
TABLE) {
var table =
pageBreak.pages[i].childNodes[j];
var rows =
table.getElementsByTagName('tr');
if (rows.length1){
continue;
}
var lastRow = rows[rows.length-1];
var myCells =
lastRow.getElementsByTagName('td');
var myCell = myCells[0];
if (!lastRowButton(table) || i !=
(pageBreak.pageLength - 1)) {
var myRow = table.insertRow(-1);
var myCell =
myRow.insertCell(-1);
var myCell2 =
myRow.insertCell(-1);
}
if (i != 0) {
var backButton =
document.createElement(div);
backButton.className =
backButton;
backButton.onclick = function(){
goBackPage(pageBreak);
};
myCell.appendChild(backButton);
}
if (i != pageBreak.pageLength - 1) {
var nextButton =
document.createElement(div);
nextButton.className =
nextButton;
nextButton.onclick = function(){
goNextPage(pageBreak);
};
myCell2.appendChild(nextButton);
}
} // if element is table
} // look for all elements in page
} // look for all pages
} // end of function
[jQuery] Need to modify function to change buttons location
Need help to reposition buttons to a particular DIV within a pageBreak
and Table.
Right now, it's simply placing the buttons under the table.
Can anyone help me figure this out?
Erik
function setButtons(pageBreak){
for (var i = 0; i pageBreak.pages.length; i++) {
for (var j = 0; j
pageBreak.pages[i].childNodes.length; j++) {
if (pageBreak.pages[i].childNodes[j].nodeName ==
TABLE) {
var table =
pageBreak.pages[i].childNodes[j];
var rows =
table.getElementsByTagName('tr');
if (rows.length1){
continue;
}
var lastRow = rows[rows.length-1];
var myCells =
lastRow.getElementsByTagName('td');
var myCell = myCells[0];
if (!lastRowButton(table) || i !=
(pageBreak.pageLength - 1)) {
var myRow = table.insertRow(-1);
var myCell =
myRow.insertCell(-1);
var myCell2 =
myRow.insertCell(-1);
}
if (i != 0) {
var backButton =
document.createElement(div);
backButton.className =
backButton;
backButton.onclick = function(){
goBackPage(pageBreak);
};
myCell.appendChild(backButton);
}
if (i != pageBreak.pageLength - 1) {
var nextButton =
document.createElement(div);
nextButton.className =
nextButton;
nextButton.onclick = function(){
goNextPage(pageBreak);
};
myCell2.appendChild(nextButton);
}
} // if element is table
} // look for all elements in page
} // look for all pages
} // end of function
[jQuery] Suggest a pop up window..
Can anyone suggest to me a good jquery pop up window script. Thanks. Erik
Re: [jQuery] Re: Help on Independent DIV's that toggle!!
Wow... I'm just now getting back to this and I am totally messed up. I never thought it would be such a challenge. I thank you. Erik On Dec 30, 2009, at 12:40 PM, brian wrote: On Tue, Dec 29, 2009 at 11:11 PM, Erik eriks...@mac.com wrote: Brian, It looks like you just added $(this).next That, and used class names in the selector, rather than a unique ID, so that it operates on a set of elements. Using next() assumes that each link comes just before the div that it should toggle.
[jQuery] Need your opinion you ALL!!!
Hello everyone, Someone wants me to use FULL DIRECTORY PATHS for every page and script for a website I just completed. I argued that it would slow down the website for users... I prefer relative paths such as /src/ and /img/. Am I wrong to say this? Is there really a difference in performance with speed whether I use absolute or relative paths? Love to hear your opinion... Thanks. Erik BTW - the website was transferred from WINDOWS SERVER to a UNIX... I actually preferred Windows. I'm dealing with a Network Admin that doesn't know web design...
[jQuery] Anyone can build me a jquery carousel?
Need help... Really busy and limited on time. I need a simple jquery carousel with 4 to 5 images. All artwork is done I'll give you the dimensions and images and my CSS tags. Email me please. Erik
