Jquery runs the script when the page was loaded. How can I ignore this ?

Question

0.00/5 (No votes)

See more:

Hello everyone,

I am in confission about that;

I have a web site and I want to include some ready jquery functions to gain much more place on my web area. Basically, on the body section I have links and when the user clicked on a link, related panel enlarges bottom of the link. This function gives me too much opportunity. However,

-> When the page is loaded, all panels should be closed(i.e unreachable). But not.
-> When the user clicked on a link, only related panel should be opened. But all the panels are opened.

JavaScript

$(document).ready(function(){
  $(".link_out").click(function(){
    $(".panel").slideToggle("slow");
  });
});
$(document).ready(function() {
$('.sayfa_yukari').click(function(){
    $('.panel').slideUp(800);
});
});

HTML Code;

HTML

<div class ="yardimlar_list">

	<div class="Toogle">
		<a class ="link_out">Üyap Klasörü Oluşturma</a>
		<div class="panel">
			<div class = "video_cerceve">
				<iframe width="640" height="640"
					src="http://www.youtube.com/embed/A4FTzZsMijk">
				</iframe>
			</div>
			<div class = "metin_cerceve">
				<h4> İcraPro da Uyap klasörü nasıl oluşturulur?</h4>
				<p>
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu 
				</p>
			</div>
			<p class ="sayfa_yukari" ><img src ="themes/images/arrow_up.png" height ="40px" width = "40px"  > </p>
		</div>
		
	</div>	
	
		<a class ="link_out">Üyap Klasörü Oluşturma</a>
		<div class="panel">
			<div class = "video_cerceve">
				<iframe width="640" height="640"
					src="http://www.youtube.com/embed/A4FTzZsMijk">
				</iframe>
			</div>
			<div class = "metin_cerceve">
				<h4> İcraPro da Uyap klasörü nasıl oluşturulur?</h4>
				<p>
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				Masa üstünde UYAP klasörünüz yoksa ya da her hangi bir sebepten dolayı silinmiş ise aşağıdaki vidomuzu izleyerek Uyap klasörü oluşturabilirsiniz.
				</p>
			</div>
			<p class ="sayfa_yukari" ><img src ="themes/images/arrow_up.png" height ="40px" width = "40px"  > </p>
		</div>
		
	</div>

Link_out is belong to the links. Both up and down.
sayfa_yukari is belong to an arrow up image. İt closes the panel.

I am adding my sites ss. Please take a look.
[Image]

Thanks for all. Have nice day.

Posted 1-Aug-13 21:23pm

FoxRoot

Updated 1-Aug-13 21:34pm

v2

Add a Solution

Comments

Nandakishore G N 2-Aug-13 3:30am

since you are using the class selector it opens all the panels with same classname. Paste the html part we can understand the structure of the html and can give suggestions.

FoxRoot 2-Aug-13 3:31am

Thanks for the answer. I am updating the question. İt is a little bit messy.

Dholakiya Ankit 2-Aug-13 3:35am

$(document).ready(function(){
$(".link_out").click(function(){
$(this).slideToggle("slow");
});
});
$(document).ready(function() {
$('.sayfa_yukari').click(function(){
$(this).slideUp(800);
});
});
tried?

FoxRoot 2-Aug-13 3:37am

Tried this. This code hides the link itself :) not the panels. Therefore, I cant see the links anymore.

Thanks for the answer.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ashutosh Mahto · Accepted Answer · 2013-08-01T22:22:00

You can also write your code as -

JavaScript

$(document).ready(function () {

            //hide all the panels on page load 
            $(".panel").hide();

            //on clicking the link, hide the div with panel class next to it
            $(".link_out").click(function () {
                $(this).next("div.panel").slideToggle("slow");
            });

            //on clicking the link, hide the parent div which is having panel class
            $('.sayfa_yukari').click(function () {
                $(this).parents().slideUp(800);
            });
});

You do not need to have separate "$(document).ready()" functions.

Thanks

Jitendra Sabat · Accepted Answer · 2013-08-01T23:58:00

Solution 2

Use 'this' selector for selecting a particular current object.In your code you have used class as your selector.That's why all the div are opened and closed at a same time.As a class represents all those div present in your page.

JavaScript

$(function () {
 
            $(".panel").hide();
            $(".link_out").click(function () {
                $(this).next("div.panel").slideToggle("slow");
            });
            $('.sayfa_yukari').click(function () {
                $(this).parents().slideUp(800);
            });
});

Posted 1-Aug-13 23:58pm

Jitendra Sabat

Comments

FoxRoot 2-Aug-13 6:23am

is this same as object oriented. Namely in c# when I used 'this' selector I sign a particular object.

For exampla; this.name = "Turan Emre";
if this is same as c#, thank you so much. You solved all the questions in my mind.

I am still junior. I have a lot of questions and codeproject solves them. Thanks everyone.

Jitendra Sabat 2-Aug-13 6:29am

Dear TarunEmre,
Yes, in case of c# you will refer to the current object,if you are using 'this'.Likewise in javascript also 'this' refers to current object.In your application when you are clicking over a particular link on your page,current object refers to that particular object on the page.

FoxRoot 2-Aug-13 6:31am

Thank you Jitendra Kumar Sabat. This helped me too much. I am trying to create an accordion object. I will share the results. Have nice days.

Jitendra Sabat 2-Aug-13 6:33am

Thanx....Have a good day.

FoxRoot 2-Aug-13 9:23am

I completed the acordion Jitendra. Thank you for all. Could you take a look;

http://k1308.hizliresim.com/1d/2/r1d4s.jpg

now, the next mission is embedding youtube videos under youtube icon(buttons). However, I want to use lightbox. Do you have any suggestions.

Jitendra Sabat 2-Aug-13 9:31am

Yaa....you can go with lightbox.It's a light weight and awesome plugin.Have a look at

http://html5box.com/html5lightbox/

Jquery runs the script when the page was loaded. How can I ignore this ?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us