Posts by Violet_82

Hi all, I wonder if you can help me again with some more json.
I have this json fragment:

cars_data={
  "haveAlook": {
    "xmlns:fo": "http://www.w3.org/1999/XSL/Format",
    "xmlns:inlineData": "Lookup",
    "CategoryAttributes": {
      "attOne": "MyattOne",
      "attTwo": "MyattTwo",
      "attThree": "MyattThree",
      "attFour": "MyattFour",
      "attFive": "MyattFive",
      "attSix": "MyattSix",
      "attSeven": "MyattSeven"      
    },
    "TheThumbnails": {
        "thumb1": "first.png",
        "thumb2": "second.png",
        "thumb3": "third.png",
        "thumb4": "fourth.png",
        "thumb5": "fifth.png",
        "thumb6": "sixth.png",
        "thumb7": "seventh.png",
        "thumb8": "eight.png",
        "thumb9": "ninth.png",
        "thumb10": "tenth.png",
        "thumb11": "eleventh.png",
        "thumb12": "twelfth.png",
        "thumb13": "thirteenth.png",
        "thumb14": "fourteenth.png",
        "thumb15": "fifteenth.png",
        "thumb16": "sixteenth.png",
        "thumb17": "seventeenth.png"
    },
    ...

What I am trying to achieve here is to get data from this json fragment using jquery/javascript and insert this data in my html (I know that if you haven't javascript enabled you can't do it and bla bla, but that's the way we have decide to implement this). The data I want to get out of the json are the thumbnail images. I have 17 images there that I want to place within the <a> tag in my html. The json fragment is in my script where the rest of the functions are.

Here's the html in question:

...
<div class="vehicle_family odd">
                <p>Small family</p>               
                <div class="vehicle_row">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="vehicle_row">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="vehicle_row">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="vehicle_row">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="vehicle_row">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="vehicle_row">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="vehicle_row">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="clear"></div>
            </div><!-- END OF vehicle_family:small family-->

            <div class="vehicle_family">
                <p>Large family</p>
                <div class="vehicle_row">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="vehicle_row">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="vehicle_row"> …

ok, hyphens removed it all works now! thanks. there are issues with the server side...it is a long story but at the moment it seems the best way.
About about looping through it get out the data and say use it to replace what's on the html? What's the best way to loop through json objects?
However, this is part of a bigger thing, so I think after this I will open another thread, rather than change the subject in this, it makes more sense

without dash it only works in opera though, firefox returns null. Point taken about the object notation. That json code (I only pasted a fraction of it, it is absolutely huge) is an XML extract. I have used this http://jsonviewer.stack.hu/ to convert from xml to json, so the dashes I presume have been inserted in the process. DO you think it is worth going through the json code and remove all the hyphens then? The thing is if it works only in opera I might not take the trouble to do it, I need that to work crossbrowser. DO you think that removing the dashes will sort everything out everywhere else? My test suggests this is not the case, because, as said, I have remove the hyphen and still no joy although it doesn't bring up an error.

Hi chaps, I wonder if you can help me with this.
I have the following script:

$(document).ready(function(){
        init_get_data();
});
var cars_data;
function init_get_data(){
    my_data={"data1":{"-xmlns:fo":"http://www.w3.org/1999/XSL/Format","-xmlns:inlineData":"Lookup","TheAttributes":{"-price":"Price","-other_attribute":"other_value"...

console.log(my_data.data1.TheAttributes.price);
}

Being very new to json I am trying to write on the firebug console to check how to get the values out of the json code. Unfortunately with the above the console returns undefined, and I was wondering why (after I manage to access one value I will try to loop through the json in order to get out more data). I also tried this console.log(my_data.data1.TheAttributes.price); but the console doesn't like it at all, it returns an error. I wonder if those hyphens before the data are a problem or not
thanks

cool cheers

right so I will leave vista on then, is formatting a laptop with vista as easy as xp? I seem to understand that I need to leave the vista partition on (where is it?) and then format the other one. SO I take I don't need the vista cd?

fantastic thanks, I won't close this post then

thanks peeps

to be really honest I am glad this is not clear even to you, it makes me feel better : - ) SO I am not that useless with jquery!
The code works fine though. I run some tests and if I remove theget(0) from both or even from one, nothing works anymore, so somehow this get(0) is doing something really important. I kind of understand what it does, but if I need to get down to the specifics, then I don't quite understand it. I mean I know that the each() function loops through each a and compares the one we hovered on ($calledFrom) with all the a's. But that get(0) does something and without it the script doesn't work

ah thinking of it, anybody knows any good tutorial on php (apart from w3c school)? Video tutorial preferred if any
thanks

thanks guys, I don't have anything particularly in mind, so I don't have a specific goal. I think I might give PHP a go then
cheers

thanks. But how about this get(0)? I mean the loop goes through each a in thumbnail, so it compares $calledFrom to this. Now, if we append get(0) to $calledFrom to get $calledFrom.get(0)) does it mean that we get the value of calledFrom? I mean I just can't understand what the role of thisget(0) is. You said it gets the first element, but if the each() loops through each a in thumbnails, then does get(0) get the index of the element according to each iteration of the loop? What I mean is say I hover on thumbnail 2, then $calledFrom.get(0) corresponds to thumbnail 1 which thanks to the loop, is compared against each a in the div and tested for equality?

hi thanks, I guess it is a solution but the thing is it will be accessible only to people with js on, if they switch it off or if they use devices that don't use js, then they won't be able to use that functionality

Hi peeps, I wonder if you can help me. My sis's got an asus notebook F50SL Series which is now unusable, very sluggish and she can't run anything on it anymore. I was wondering if it would be a good idea to format it and install xp on it. At the moment they have vista on it, but I don't trust vista, and I think xp might be better.
ANybody's done this? I know it has a recovery partition, but I am thinking to wipe off everything including that partition
any advice welcome
thanks

Hi there, I am in a bit of a situation here trying to prevent the browser from following a link within a <a>
This is the html code:

                <a href="#" onclick="changeImage(this,'/folder/images/23.jpg');">
                    <img src="/folder/images/23_thumb.jpg" alt="">
                    <span>this is it</span>
                    <h3>This is it</h3>
                    <p class="caption">lorem ipsum...</p>
                </a>

and here's the script:

function changeImage(calledFrom, big_image){    
    var newImage = $('#placeholder_image');
    var newTitle = $(calledFrom).find('h3').html(); 
    var newText = $(calledFrom).find('p').html();
    newImage.fadeOut(50, function(){
        newImage.attr('src', big_image);
        }).fadeIn(900);
    $('.car_model_description')
        .find('h3').html(newTitle).end()
        .find('p').html(newText);
        Cufon.replace('.car_model_description h3');
        Cufon.replace('.car_model_description p');      
}
function resetThumbnails(){
    $('.thumbnails a').each(function(){     
        $(this).stop(true, true).fadeTo(500,1);
    });
}

$(document).ready(function(){
    $('.thumbnails')
        .mouseleave(function(){
                resetThumbnails();
            })
        .find('a').hover(function(){
                hoverThumbnail(this);
            });
});

function hoverThumbnail(calledFrom){
        var $calledFrom = $(calledFrom);
        $('.thumbnails a').each(function(){             
                if($(this).get(0) == $calledFrom.get(0)){
                    $(this).fadeTo(0,1);
                }
                else {
                    $(this).fadeTo(0,0.5);
                }
            });
}

Now, to stop the default behaviour I could simply add a return:false; after the javascript call in the html but the problem is that I need the link to be activated if people click on what's on the span tag. The way the script at the moment is that when users click on the thumbnail image the big image will change accordingly but when they click on the text in the span I need that text to be a link and I need the browser to follow that link only in that particular situation. Does it make sense?
I wonder how I can do that. If I add the return:false; the link won't work at all, but I need a way to stop the link from working when they click on …

hi sorry, you know when you said to rearrange the partitions? I have something different from what you've said: http://antobbo.webspace.virginmedia.com/test/ubuntu.jpg
I don't see the swap partition I am afraid, so I wonder what should I do? should I create another partition table from there? I think windows is instaleld on the sda2 partition. Any advice is greatly appreciated of course : - ) or even a link to some resources please
thanks

fantastic thanks for your help. Sorry I am a bit of a beginner with jquery...!

fab thanks

yep all done and working, thanks a lot

Hi peeps, I wonder if you can help me at all undertanding this code. Unfortunately I don't have it live anywhere, it is something I have seen somebody working on
Here's the code and I will explain breifly what it does and what's not clear (which needless to say is in the jquery script). (Apologies if the formatting is not correct but I am having terrible problems with this thread, the scrollbar doesn't scroll all the way down to the end so I can't access the bottom part and format it as it should be, sorry)
HTML

<link rel="stylesheet" type="text/css" href="style_images.css"><!-- MY CSS -->
<script type="text/javascript" src="assets/big_images.js"></script>

<div class="content_wrap">
    <div id="bodycopy97681"><h1 style="font-size:120%">See the range on offer</h1><br>
        <div class="car_model_description">
            <div class="compare_button">
                <a href=#><img src="assets/compareBTN.png" alt=""></a>
            </div>
            <h3 id="caption_title"></h3>
            <p class="caption" id="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet nisi gravida lacus tempor semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
        </div>
        <div class="image_container">
            <img src="assets/placeholder.jpg" alt=" placeholder car" id="placeholder_image" width="940" height="366">
            <img src="assets/image_1.png" alt="car1" class="image_invisible" width="940" height="366">
            <img src="assets/image_2.png" alt="car2" class="image_invisible" width="940" height="366">
            ...
        </div><!-- END OF image_container -->
        <div class="thumbnails">
            <div class="thumbnails_row">
                <a onclick="changeImage(this,'assets/image_1.png')">
                    <img src="assets/thumb1.jpg" alt="">
                    <span>Car1</span>
                    <h3>Car1</h3>
                    <p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna tellus, scelerisque dictum vulputate et, posuere scelerisque mi. Morbi eu purus libero.</p>
                </a>

                <a onclick="changeImage(this,'image_2.png')">
                    <img src="assets/thumb2.jpg" alt="">
                    <span>car2</span>
                    <h3>car2</h3>
                    <p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna tellus, scelerisque dictum vulputate et, posuere scelerisque mi. …

really?! Gosh, I am sure I have used innerHTML before in IE's. Ok thanks for that

thank I will have a look at that and post back if any problem.
About the runtime error, shouldn't I get that on other browsers as well as IE's? What do you think it is causing IE's to behave like that?
thanks

fantastic thanks, I have purchased a sandisk usb 16GB. Thing is, I copied the ubuntu ISO on the usb but how do I make it bootable? I mean I changed the booting order on the bios thinking that was enough but when I boot from usb it says no operating system found...
thanks

As said before I needed to add some fade to it: when I click on the image I want the big image to fade in nicely, so I modified my script to be

function changeImage(image,caption){
    var newImage=document.getElementById("placeholder_image");
    document.getElementById("caption").innerHTML=caption;
    $('#'+ newImage).attr('src','image').fadeIn();  

}

thinking I could change the src property of the script with the attr() method. I don't want to cause confusion, so if you think it is better to open a separate thread I will put this in there
thanks

I have now, http://antobbo.webspace.virginmedia.com/various_tests/toyt/test.htm
I knocked this up quickly and in this case it is not working in IE at all (7,8,9).
Ither browsers are fine. Any idea at all?
I might also need to add some jquery at some point to handle the fade, I will give it a go

Hi, I have just bought a sandisk memory stick - 16gb - and I noticed that there is sth installed on it, clucbsandisk or something like that. I wonder, what is it, do I have to keep it, can I get rid of it without compromising my memory stick?
thanks

peeps, given the following markup

<link rel="stylesheet" type="text/css" href="assets/style_images.css"><!-- MY CSS -->
<script type="text/javascript" src="assets/big_images.js"></script>
        <div class="car_model_description">
            <div class="compare_button">
                <a href=#><img src="assets/compareBTN.png" alt=""></a>
            </div>
            <p id="caption">Default text</p>          
        </div>   
        <div class="image_container">
            <img src="wathever.jpg" alt="" id="placeholder_image" >
            <img src="wathever1.png" alt="" class="image_invisible">
            <IMG SRC="wathever2.png" alt="" class="image_invisible">
            <IMG SRC="wathever3.png" alt="" class="image_invisible"><!--to change -->
            <IMG SRC="wathever4.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever5.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever6.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever7.png" alt="" class="image_invisible">
            <IMG SRC="wathever8.png" alt="" class="image_invisible">
            <IMG SRC="wathever9.png" alt="" class="image_invisible">
            <IMG SRC="wathever10.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever11.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever12.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever13.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever14.png" alt="" class="image_invisible"><!-- to change -->
            <IMG SRC="wathever15.png" alt="" class="image_invisible">
        </div><!-- END OF image_container -->
        <div class="thumbnails"> 
            <ul class="thumbs_columns">
                <li>
                    <ul class="thumb_rows">
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb.png" alt="iQ" onclick="changeImage('wathever.png','&lt;h3&gt;iQ&lt;/h3&gt;some text')">iQIST</a></li>
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb1.jpg" alt="PRIUS" onclick="changeImage('wathever1.png','&lt;h3&gt;Prius&lt;/h3&gt;some text1')">Pri</a></li>
                    </ul>
                </li>

                <li>
                    <ul class="thumb_rows">
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb2.png" alt="AYGO" onclick="changeImage('wathever2.png','&lt;h3&gt;AYGO&lt;/h3&gt;some text2')">AYGO</a></li>
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb3.jpg" alt="Prius Plug-in" onclick="changeImage('wathever3.png','&lt;h3&gt;Prius Plug-in&lt;/h3&gt;some text3')">Plug-in</a></li>
                    </ul>
                </li>

                <li>
                    <ul class="thumb_rows">
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb4.jpg" alt="ALL NEW YARIS" onclick="changeImage('wathever4.png','&lt;h3&gt;The hEY&lt;/h3&gt;some text4.')">me</a></li>
                        <li><a href="JavaScript:void(0);"><IMG SRC="thumb5.png" alt="Prius+" onclick="changeImage('watheve5.png','&lt;h3&gt;Prius+&lt;/h3&gt; some text5.')">me +</a></li>
                    </ul>
                </li>


            </ul>
            <div class="clear"></div>
        </div><!-- END OF THUMBNAILS -->

and the following external script

function changeImage(image,caption){
    var newImage=document.getElementById("placeholder_image");
    document.getElementById("caption").innerHTML=caption;
    newImage.src=image;

}

could anybody let me know why this wouldn't work in IE7 and 8? It is fine in every other browser but in IE7 and 8 the script doesn't run, and the images don't change. #
Basivcally when …

hi I think Im slowly getting there, here's the link http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/working/test.htm

Here's what I have done:
html

<div>
            <p>This paragraph is the default</p>
            <p class="hide_paragraph">This paragraph comes in with image 1</p>
            <p class="hide_paragraph">This paragraph comes in with image 2</p>
            <p class="hide_paragraph">This paragraph comes in with image 3</p>
        </div>
        <div class = "big_image" id="big_image">
            <img src="placeholder.jpg" alt="" id="placeholder_image">
            <img src="test1.jpg" alt="" class="hide_image">
            <img src="test2.jpg" alt="" class="hide_image">
            <img src="test3.jpg" alt="" class="hide_image">
        </div>
        <div class="thumb_box">
            <ul class="thumb_images">
                <li><a href="#"><img src="test1_thumb.jpg" alt="" onclick="changeImage('test1.jpg')">Thumb1</a></li>
                <li><a href="#"><img src="test2_thumb.jpg" alt="" onclick="changeImage('test2.jpg')">Thumb2</a></li>
                <li><a href="#"><img src="test3_thumb.jpg" alt="" onclick="changeImage('test3.jpg')">Thumb3</a></li>
            </ul>
        </div>

javascript

function changeImage(image){

    var theImage = document.getElementById("placeholder_image");
    theImage.src = image;   

}

CSS

.big_image{
    border:1px solid red;
    width:700px;
    height:525px;
    margin:0 auto;
}

.thumb_images{
    list-style:none;    
}

.thumb_images li{
    float:left;
    padding:15px;
}

.thumb_images li img{
    display:block;
}


body{
    background-color:pink;
}

.thumb_images li a img{
    border-style:none;
}

.thumb_images li a{
    text-decoration:none;
}

.thumb_images li a:hover{
    color:red;
    text-decoration:underline;
}

.hide_image{
    display:none;
}

.show_image{
    display:block;
}

.hide_paragraph{
    display:none;
}

.show_paragraph{
    display:block;S
}

I used only javascript. I don't want to give you the impression that I am changing my mind all the time, only, I am trying to get the best solution that works for me and that I can understand.
Now, the images change, which is great, but I am having trouble changing the associated paragraphs. At the moment there is a function call from the html:

<li><a href="#"><img src="test1_thumb.jpg" alt="" onclick="changeImage('test1.jpg')">Thumb1</a></li>
        ...

I need a way to pass the paragraph to …

I mean, at the end of the day it doesn't matter if I use javascript or jquery. I have a little script that works to an extent and seems better than jquery, unfortunately I can't find a way to change more than 1 image...

var pic1 = new Image();
pic1.src = "test1.jpg";

var pic2 = new Image();
pic2.src = "test2.jpg";

var pic3 = new Image();
pic3.src = "test3.jpg";

function changeImage(){
    var theImage = document.getElementById("placeholder_image");
    theImage.src = pic1.src;

}

hi well, unfortunately I have to do it myself, can't use an out of the box product, and besides, this will help me understand it better.
Now here's the problem: http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test.htm

Not only the images need to change but also the paragraphs related to the images. Now could anybody help me to understand how I need to set up the script please? I started off with jquery but I am not entirely sure how to continue it. The idea is that when I click on a thumbnail in thumb_images div

<div class = "big_image">
            <img src="placeholder.jpg" alt="" class="show_image">
            <img src="test1.jpg" alt="" class="hide_image">
            <img src="test2.jpg" alt="" class="hide_image">
            <img src="test3.jpg" alt="" class="hide_image">
        </div>
        <div class="thumb_box">
            <ul class="thumb_images">
                <li><a href="#"><img src="test1_thumb.jpg" alt="">Thumb1</a></li>
                <li><a href="#"><img src="test2_thumb.jpg" alt="">Thumb2</a></li>
                <li><a href="#"><img src="test3_thumb.jpg" alt="">Thumb3</a></li>
            </ul>
        </div>

the big image in the big_image div changes from default to whathever I clicked on, probably changing the class from show_image to hide_image. Same principle for the paragraphs:

<div>
            <p>This paragraph is the default</p>
            <p class="hide_paragraph">This paragraph comes in with image 1</p>
            <p class="hide_paragraph">This paragraph comes in with image 2</p>
            <p class="hide_paragraph">This paragraph comes in with image 3</p>
        </div>

I have preloaded the images in the script

var pic1 = new Image();
pic1.src = "test1.jpg";

var pic2 = new Image();
pic2.src = "test2.jpg";

var.pic3 = new Image();
pic3.src = "test3.jpg";

$(document).ready(function(){

    $("thumb_images li a").click(function(){

        $("big_image img").fadeOut(1000, function(){



        });

    });

});

and now I need a way to say when I click on …

hang on but the iso I have is 700mb, so I could use a 1gb stick and burn it onto it? or better still I have a 1TB external drive, would that be ok rather than a usb?

I actually have a iso image kicking around somewhere, but don't have a large enough usb. What if I mount the image on my computer, would that work the same?

I actually have a iso image kicking around somewhere, but don't have a large enough usb. What if I mount the image on my computer, would that work the same?

Hi peeps, I was thinking to develop something similar to this http://www.toyota.co.uk/cgi-bin/toyota/bv/generic_editorial.jsp?navRoot=toyota_1024_root&noLeftMenu=true&edname=See-the-range&zone=Zone+See+the+Range&id=SeeTheRange_Link

It is in flash now, and I would like to have something similar in jquery, what would be the best way to proceed do you think? Any advice?
thank you

HI peeps, I have a general question about scripting. what's the best scripting to learn (I would like to learn one language) and do you have any link to any good resource, not just a tutorial but somewhere I can see what scripting can do (sorry I am really new to it)
thanks

Some time ago I briefly looked into installing Ubuntu 11.10 (or above) on my dell xps17. I remember there were quite a few issues (sorry can't remember which ones, it was long time ago) and I was wondering if anybody could let me know if I can install it without having any problems (I would like to keep windows 7 there anyway).
I have found this http://www.linuxbsdos.com/2011/05/22/how-to-dual-boot-windows-7-and-ubuntu-11-04/ which is a nice tutorial but in my experience (I have installed ubuntu before on other machine) there's really no need to tweak the partition. What do you think?
My processor is Intel(r) Core(tm) i7-2720QM 2.2ghz.
any idea?
thanks

quite a bit, but unfortunately that's what the author has used. Is my analysis of the code somewhat correct? Clearly I am missing something but not quite sure what it is

HI guys, I was reading some tutorial about a crossfading gallery, and I am having a few problems understanding it

Here's the code.
HTML (just the relevant bits)

...  
      <div id="photos">
        <img alt="Glendatronix" src="../../images/glenda_200.jpg" />
        <img alt="Darth Fader" src="../../images/fader_200.jpg" />
        <img alt="Beau Dandy" src="../../images/beau_200.jpg" />
        <img alt="Johnny Stardust" src="../../images/johnny_200.jpg" />
        <img alt="Mo' Fat" src="../../images/mofat_200.jpg" />
     </div>
...

CSS

#photos img {
  position: absolute;
}

#photos {
  width: 180px;
  height: 200px;
  overflow: hidden;
}

SCRIPT

$(document).ready(function(){
  rotatePics(1);
});

function rotatePics(currentPhoto) {
  var numberOfPhotos = $('#photos img').length;
  currentPhoto = currentPhoto % numberOfPhotos;

  $('#photos img').eq(currentPhoto).fadeOut(function() {
        // re-order the z-index
    $('#photos img').each(function(i) {
      $(this).css(
        'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
      );
    });
    $(this).show();
    setTimeout(function() {rotatePics(++currentPhoto);}, 4000);
  });
}

Now,in the script we call the function rotatePics with a numerical parameter (why 1 and not 0?).
AT the first round currentPhoto in function rotatePics(currentPhoto) { is 1, then we assign numberOfPhotos the number of the pictures (5) and then the currentPhoto value is the result of currentPhoto % numberOfPhotos;
which is 1%5, so 1. IN general the modulus operation will always give a value smaller than the number of pictures, so between 0 and 4, so I wonder what happens at picture 5 and picture 0 since we pass the function a 1 and not a 0?
Next line $('#photos img').eq(currentPhoto).fadeOut(function() { selects the picture with the currentPhoto index, which at the moment is 1 and the fadeOut method calls a function

If you're learning jquery there are quite a few resources out there. For online tutorials, I'd use w3c school http://www.w3schools.com/jquery/default.asp to give you an idea, then don't forget to look at the jquery api for reference http://jquery.com/ - if you google for a method say jquery hide() it will direct you to the api http://api.jquery.com/hide/
Also these are very very good tutorials http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/

Also, I think that books are the best allies, so try to find something about jquery. I have recently read this http://www.amazon.co.uk/JavaScript-Ajax-Dummies-Andy-Harris/dp/0470417994 and I am looking at Jquery novice to ninja - Earl Castledine, and both of them ar okish.

Brilliant, sorry guys, I had trouble conveying the message for whatever reason, I couldn't really explain this correctly, but yes I was asking and not telling this : - )
I guess what wasn't really clear to me was using the DOM as a selector, I thought that this

#div_1 #div_2 .div_3 .div_4_button a {
    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;
}

and this

.div_4_button a {
        height:20px;
        display:block;
        white-space:nowrap; 
            text-transform:lowercase;
    }

were the same thing. ANother thing that confused me was that in the sample css I posted above -which is part of a very large css although I have modified slightly the class names and ids - I could only see these selectors #div_1 #div_2 .div_3 .div_4_button a , .more_text .more_paragraph .div_4_button a whereas I was actually looking for this .div_4_button a thinking that they were actually referring to that if it makes sense

HI guys, thanks, sorry maybe I failed to explain what I was trying to achieve. The example above is what I have been given. I know I could change the html (link classes and ids) but I can't chance for reasons that don't really matter now, but I am stuck with that code, with two a tags used in different places, that share the same class of .div_4_button a. Now, these 2 classes applied to these 2 links need to be slightly different, so they have slightly different properties and even declarations occasionally, so my question is, to make sure that both html elements can be targeted using the same class I should use these selectors respectively

#div_1 #div_2 .div_3 .div_4_button a {
    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;
}
.more_text .more_paragraph .div_4_button a {
    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;
}

The advantage of navigating the whole DOM in the selection is that I can target different elements with the same class, and even make small changes to the class without affecting the other element that shares the class
thanks

ok, then, let's change the code sligthly then. say I have this code

...
<div id="div_1" style="display:none">

            <div id="div_2">

                  <div class="div_3">

                        <div class="div_4_button"><a href="#" onclick="closeAlertSimple()">Continue</a></div>

                  </div>

                  <h1>Cookies on this website</h1>

                  <div class = "more_text">
                    <div class = "more_paragraph">
                        <div class = "div_4_button">
                            <a href = "#">Moving on</a>
                        </div>
                    </div>

                  </div>


            </div>

      </div>
      ...

Say i want to target and style the link in the div_4_button div there are 2 ways to do it: one is to use this selector:

div_4_button a {}

and the second one is

#div_1 #div_2 .div_3 .div_4_button a {}

I was told the second one is better in certain situation. Again let's take the above html and the 2 divs with the links in, select them and slightly change the declaration.

#div_1 #div_2 .div_3 .div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;
}

.more_text .more_paragraph .div_4_button a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;

}

everything will work fine and the two links will have 2 slightly different styles according to the css.
I suppose this is the only way I can target the 2 links and modify slightly the class without affecting the other

If instead I do the following attempting to style the 2 links with the same class, it obviously won't work, because probably the second class will override the first one

.div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;

}

.div_4_button a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;}

Hope I am making sense
thanks

Hi guys, I have a question about selectors in css.
Let's take this html excerpt but before looking at the code let's assume that the html is part of a very very large page, and the same with the css. In addition the css rule below is called several times for different elements and therefore needs to be slightly different each time.

...
<div id="div_1" style="display:none">

            <div id="div_2">

                  <div class="div_3">

                        <div class="div_4_button"><a href="#" onclick="closeAlertSimple()">Continue</a></div>

                        <a href="#" class="div_4_plain">Find out more</a>

                  </div>

                  <h1>Cookies on this Toshiba website</h1>

                  <p>bla bla <a href = "#">and more bla.</a></p>

            </div>

      </div>
      ...

Say i want to target and style the link in the div_4_button div, I would do it this way:

.div_4_button a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;

}

But instead, I have been told that there is also another method, better than this especially if you want to use the above css rule with more than an item requiring slightly different styles. Here's what I have been shown:

#div_1 #div_2 .div_3 .div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;

}

You'll notice the css declarations are slightly different. SO tu summarize say I have this situation:

#div_1 #div_2 .div_3 .div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;

}

#other_Selector_somewhere_else #another_selector .a_different_class .div_4_plain a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;

}

everything is fine.
If instead I have this situation

.div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;

}

.div_4_button a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;

}

it's …

blocblue, thank you very much for the explanation, and much appreciate your correction to the code, I was just curious as to why I had to use children('li') but now by reading what you said and looking at the css is clear, so thanks for that :-)

Hi blocblue, thanks for your post and code, it works. Now, the thing is I think I am a bit confused about this children/sibling business. In my html I have

<ul id = "main_list">
                <li><**a href = "#" class = "header">Today</a>
                    <ul>**
                        <li>apples</li>
                        <li>pears</li>
                        <li>banabas</li>
                    </ul>

In the script with this $('ul#main_list a.header') I am referring to the link which is child element of the list item. So you're saying that the bolded tags in the code <a href> and <ul> are siblings? I thought they were parent and child, hence my code.

On a separate note: let's take you're code. Here $(this).siblings("ul").children("li").slideToggle(); why can't I omit .children("li"), why .siblings("ul") isn't enough?

thanks

Hi there, I am working on an accordion, I am more interested in the way it works, but I am having some problems. I worked on something similar sometime ago, and got some help in here, but I thought I will try to do it again on my own..and ehm, something went wrong.

There must be an error in the code somewhere but I am not sure what it is

as jquery I am using

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

Here's the code I came up with;
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>test</title>
        <link rel = "stylesheet" type = "text/css" href = "style.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type = "text/javascript" src = "script.js"></script>

    </head>

    <body>
        <div id = "accordion">
            <ul id = "main_list">
                <li><a href = "#" class = "header">Today</a>
                    <ul>
                        <li>apples</li>
                        <li>pears</li>
                        <li>banabas</li>
                    </ul>
                </li>
                <li><a href = "#" class = "header">Yesterday</a>
                    <ul>
                        <li>fish</li>
                        <li>pork</li>
                        <li>beef</li>
                    </ul>
                </li>
                <li><a href = "#" class = "header">Day before yesterday</a>
                    <ul>
                        <li>beans</li>
                        <li>peas</li>
                        <li>lettuce  </li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

CSS

#accordion
    {
        border:1px solid red;
        width:500px;
        height:500px;
        margin:0 auto;
    }

#main_list
    {
        border:3px solid blue;  
    }

ul#main_list, #main_list ul
    {
        list-style:none;
    }

#main_list li a
    {
        text-decoration:none;
        color:black;
        font-size:150%;
    }

#main_list li a:hover
    {
        background-color:red;
    }

#main_list > li > ul > li
    {
        display:none;
    }

JQUERY

$(document).ready(function(){
    $("ul#main_list a.header").click(function(){
        $(this).children("ul").slideToggle();

    });

});

Here's a preview: http://antobbo.webspace.virginmedia.com/various_tests/accordion/test.htm

I mean …

undestood, sorry I think I didn't notice that in the script there is a span with a class of scrolled, my bad!
thanks for your help guys

Hi guys,
I wonder if you could clarify something for me. I am looking at some css examples and I have this situation here:
html:

  ...<div id="news">
    <h2>Latest News</h2>
    <p>
      Which member of the seminal calypso/lectro band <em>C&amp;C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands?
      <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span>
    </p>
    <p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p>
  </div>...

the css:

span.scrolled {
    background-color: red;
}

#news {
  height: 100px;
    width: 300px;
    overflow-y: scroll;
}

and the script:

$(document).ready(function(){
  $('#news').scroll(function() {
    $('#header').append('<span class="scrolled">You scrolled!</span>');
  });
});

The main question is about the css. What does span.scrolled mean? I mean I can't understand this syntax. Where is that scrolled coming from? It is not referenced anywhere in the html

For the sake of clarity here's the link to the page http://antobbo.webspace.virginmedia.com/various_tests/test/chapter_03/12_scroll_event/index.html where you can see what happens when you use the scroll bar

Second question, less inportant, is about the jquery (sorry I don't want to double post in the javascript area so I keep it here). Is the scroll event part of jquery or does it need a UI interface library to work?
thanks

oh does it really point to the #navigation a? I think that confused me a bit. Now, why is that, I mean, is that because hovering is an event and animate is not?

fantastic, thanks a lot for your help JorgeM