JS and Jquery help needed

[openshaww]

I need the following to be added to some articles in my website. http://jsfiddle.net/s6JWp/

It is so that I can show a Read more... Button and when you click on it it expands the text.

So ive added everything. html code and it is displaying correctly and the css code in my style sheet but where do I put the java script part. in jquery.js?

Help will be appreciated

 

[scudsucker]

Create a new .js file, and include it using script tags the same way you include query.js

 

[openshaww]

i cant get it to work ive tried adding it in the html and apart

 

[openshaww]

Stupid question can you run js or jquery if the files aren't uploaded?

 

[DrJohnZoidberg]

Firstly you must include jquery in your page and then the script. So you would add something like this to your page.

<script src="jquery/jquery-1.11.1.min.js"></script>

<script>
$(".more").toggle(function () {
    $(this).text("less..").siblings(".complete").show();
}, function () {
    $(this).text("more..").siblings(".complete").hide();
});
</script>

 

[DrJohnZoidberg]

Stupid question can you run js or jquery if the files aren't uploaded?

Javascript is supported by all modern browsers already, JQuery you must either download and install on your server or you can query it from a cdn like so:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

 

[IndigoIdentity]

you must include

That would be a nice start

https://developers.google.com/speed/libraries/devguide#jquery

 

[openshaww]

Check out the site http://moveyourass.co.za/test/

Go to indoor/outdoor exhibition material.

It isnt running the js

 

[Compulutions]

Greetings!

You seem to be missing the basics when it comes to jQuery in general, maybe I can help a little...

When you put jQuery code into jsfiddle you're essentially wrapping it in two things... An html script tag and then the jQuery function that runs when the document "ready" for DOM manipulation.

http://learn.jquery.com/using-jquery-core/document-ready/

Now within that manipulation part. Note what toggle actually does... In the manual it states:

With no parameters, the .toggle() method simply toggles the visibility of elements

http://api.jquery.com/toggle/#toggle-showOrHide

So in essence you would have code that is something like this before your closing head tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
      $(".more").click(function () {
         $(".complete").toggle(500);
      });
    });
</script>

Hope that helps...

 

[Raithlin]

Stupid question can you run js or jquery if the files aren't uploaded?

If you mean uploaded to the host, then no.

 

[openshaww]

Thanks Compulutions got it to work with your code. But if I click a "read more" button it expands all of the articles. how can I separate them?

 

[_kabal_]

read the jquery documentation

http://api.jquery.com/closest/

$(".more").click(function () {
     this.closest(".complete").toggle(500);
});

the "this" refers to the "more" link that has been clicked.
so, "toggle the 'complete' div, that is closest in the dom tree, to the 'more' link I clicked"


something along those lines

 

[DrJohnZoidberg]

Also, I noticed you're loading jQuery twice (two different versions), one is on the host and the other you're calling from the Google source. You should remove one:

		[B]<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>[/B]

		<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700|Open+Sans:700' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="js/jquery.mobile.customized.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
		<script type="text/javascript" src="js/camera.min.js"></script>
		<script type="text/javascript" src="js/myscript.js"></script>
		<script src="js/sorting.js" type="text/javascript"></script>
		<script src="js/jquery.isotope.js" type="text/javascript"></script>
       <script src="js/read.js"></script>
      [B] <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>[/B]

 

[Compulutions]

Thanks Compulutions got it to work with your code. But if I click a "read more" button it expands all of the articles. how can I separate them?

It was a brief example to further your understanding rather than a direct solution in your own situation.

It will not work out exactly for your situation as you have more than one tag marked with the class "complete". It would affect all of them.

So, if you wanted to affect only the .complete that is most nearest to the element that was clicked, you would use something like next(), or rather prev().

Closest will not work as it traverses the DOM a bit differently:

testing the element itself and traversing up through its ancestors

In your situation the element that you wish to manipulate is a sibling element so this is what these functions are used for.

You would need something that is more like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    // once the page has loaded and the DOM is ready for manipulation
    $(document).ready(function(){ 
        // when the element with the class "more" has been clicked
        $(".more").click(function () { 
            // grab the current value of "more"
            var currentText = $(this).text(); 
	    // create a new variable containing an opposite value, e.g. if it's currently more, change to less and visa versa
            var newText = currentText == 'more...' ? 'less...' : 'more...';
	    // apply the new value to the element with text()
            $(this).text(newText); 
	    // toggle the display of the previous element with a class "complete"
            $(this).prev(".complete").toggle(500); 
	});
    });
</script>

 

[Darko]

Please try and avoid loading any external scripts inside the head tag. Rather include scripts before you close the body tag, right at the bottom of the page.