www.webdeveloper.com
Results 1 to 13 of 13

Thread: Each and This Problem

  1. #1
    Join Date
    Sep 2006
    Posts
    31

    Each and This Problem

    Hi,

    I am trying to get to grips with 'each' and 'this' in Javascript. I have results from a database, put out in php (see below). For each item title I put out a new box, within that box I want the user to click and see more content just for that box. The problem is that my script opens all the boxes at once, so I want the focus to be on just the one the user is clicking on. Having read up on each and this I know that I am not understanding it so any help on this below would be much appreciated:

    PHP Code:
    <div class="box col5"> 
            <?php 
    /*Start of dynamic content open*/ 
    echo "<p>$title</p>"
    echo 
    "<img src=$source_image />"

    <
    div class="panel_button" style="display: visible;"><img src="../images/expand.png"  alt="expand"/> <a href="#"><?php $item_title?></a> </div>  
     <div class="panel_button" id="hide_button" style="display: none;"><img src="../images/collapse.png" alt="collapse" /> <a href="#">Hide</a>  
     <div class="panel_button" id="hide_button" style= "display: none;">   <object type="text/html" data='<?php echo $item_url;?>' width="100%" height="800px" style="overflow:auto;border:5px ridge blue">  
        </object>    
            </div>  
          </div>  
        </div>
    And now for the Javascript that is causing me the issues, the 'each' and the 'this':

    Code:
     <script>
    $(document).ready(function() {
        $("div.panel_button").each(function() {
        $(this).click(
    
            function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()
                }); $("div#hide_button").click(<wbr>function(){              
            $("div#panel").animate({
                height: "0px"
            });
       });       
    });
    
    $(document).ready(function() {
        $("div.panel_button").each(function() {
            
       
    
            function(){ $("div#panel").animate({ height: "500px" }) .animate({
            height: "400px" }, "fast"); $("div.panel_button").toggle()
                }); $("div#hide_button").click(<wbr>function(){
            $("div#panel").animate({
                height: "0px"
     
            }, "fast"); 
          });       
    });
    </script>
    Thanks in advance,

    G

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    The code you have is a framework so any framework issues are best addressed in the JavaScript frameworks forum.

    Your PHP should likewise be address in the PHP forum.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Sep 2006
    Posts
    31
    I'm not sure about a framework, its just knocked together Javascript in order to open a div or two. As for the PHP, that is there for reference - it works fine. Up until now there was only one box to open, but now I need focus on the one the user is clicking on, not to open all of the boxes put out to the User.

    Thanks,


    G

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Thats not JavaScript, its a framework, usual signs being that you see things like...
    Code:
     $("div#panel").animate({
                height: "0px"
    That is not JavaScript. Best guess is that its JQuery
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    Sep 2006
    Posts
    31
    Ok thanks, I can't see how to move the post so I'll re-post this in there.

    G

  6. #6
    Join Date
    May 2014
    Posts
    936
    Actually, this looks like a PHP problem.

    Code:
    echo "<img src=$source_image />";  
    
    <div class="panel_button"
    Do you see a problem here? You closed the echo string -- and then have markup without a ?> -- that's gonna bomb on the server right there.

    Really though you're using multiple echo to do the job of one.... that "col5" probably means some rubbish presentational HTML/CSS framework crap making life harder... I'm not sure all your classes are necessary or why you need quite so many DIV in there... and your lack of formatting is hiding that you also forgot to close a DIV. The colour syntax highlighter here ALONE is telling you there's something wrong. I'd also suggest switching to single-quotes and comma delimits instead of that goofy opening and closing PHP with multiple echo statements for NOTHING other than making the parser have to work harder. You are also trying to use the same ID more than once, and since your scripting is targeting by ID, that 'object' one (which is sending up warning flags here as something really craptastic since I smell flashtardery) is just going to fail... and I'm pretty sure you didn't want it INSIDE the previous panel_button. You also don't say "800px" on the height ATTRIBUTE, you say px on CSS properties. You want pixels in HTML, you omit the metric. Of course if you were to actually use HTML properly, you wouldn't be using that stupid STYLE attribute anywhere either.

    WITHOUT fixing the classes for nothing, DIV for nothing, presentation in the markup, and just trying to make your broken methodology work, it would go something like this:

    Code:
    <?php
    echo '
    	<div class="box col5">
    	
    		<p>', $title, '</p>
    		<img src="', $source_image, " alt="DESCRIBE THIS IMAGE!!!" />
    		
    		<div class="panel_button" style="display:visible;">
    			<img src="../images/expand.png"  alt="expand"/>
    			<a href="#">', $item_title, '</a>
    		<!-- .box.col5--></div>   
    		
    		<div class="panel_button" id="hide_button" style="display:none;">
    			<img src="../images/collapse.png" alt="collapse" />
    			<a href="#">Hide</a>   
    		<!-- #hide_button.panel_button --></div>
    		
    		<div class="panel_button" id="hide_button2" style="display:none;">
    			<object
    				type="text/html"
    				data="', $item_url, '"
    				width="100%" height="800"
    				style="overflow:auto; border:5px ridge blue"
    			></object>     
    		<!-- #hideButton2.panel_button --></div>  
    		
    	<!-- .box.col5 --></div>';
    ?>
    I'd really have to see in action what you are trying to accomplish, but I think most of your scripting and a third your markup probably belongs on the cutting room floor -- but at least the above will get your PHP outputting something. ('cause what you have right now WON'T!)

    .. that said, it looks like you either have a ton of jQuery for nothing, or JQ doing CSS' job. Don't know what that mess of scripting is supposed to do, but it doesn't look good.

    Oh, and @\\.\ -- you might want to ease up on people about where they post things, particularly if you're not even going to LOOK at the code that has NOTHING to do with what you said, but is in fact full of bugs and problems to be fixed elsewhere! This is like the tenth thread I've seen you do this to someone where your complaint has had jack **** to do with the person's problem or even where the post belongs. I might be a colossal jackass to people, but at least when I do so I'm trying to help.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Sep 2006
    Posts
    31
    Thanks, your post made me laugh! I have tidied things up, not exactly like you have done and not perfect, but it works and should be easier to read. Yes this is based on a framework, crappy thing - I am trying to get all of the functionality working before I worry about aesthetics, that will come later. So here is cleaned code that I want to open the object you click on, not all of them. To help I have added the bits before I put them out in the box. For every item title a box is spat out, in my <script> section I have been playing around with each and this to solve, but I can't get its use right:

    PHP Code:
    <?php
    // GOING THROUGH THE DATA
     
    if($result->num_rows 0) {
        
      
    while(
    $fetch=mysqli_fetch_array($result)) {
     
    $title=$fetch['title'];
    $feed_rss=$fetch['url'];
    $content_id=$fetch['content_id'];
    $source_image=$fetch['source_image'];     
    $item_id $fetch['item_id'];
    $item_title $fetch['item_title'];
    $item_date $fetch['fetch_date'];
    $item_description $fetch['item_description'];
    $item_url $fetch['item_url'];


    //Display:

    ?>
        <div class="box col5">
            <h1><?php echo "$title";?></h1>
            <img src="<?php echo "$source_image";?>" alt="Source Image"/>
            <div class="panel_button" style="display:visible">
                <img src="../images/expand.png" alt="expand">
                <a href="#"> <?php echo "$item_title";?></a> 
            <!-- .box.col5--></div>
            
            <div class="panel_button" style="display:none">
                <img src="../images/collapse.png" alt="collapse">
                <a href="#"> Hide</a> 
            <!-- #hide_button.panel_button --></div>
            
            <div class="panel_button" id="hide_button2" style="display:none;">
                <object
                    type="text/html"
                    data=<?php echo "$item_url";?>
                    width="100%" height="800"
                    style="overflow:auto; border:5px ridge blue"
                ></object>     
            <!-- #hideButton2.panel_button --></div>  
            
        <!-- .box.col5 --></div>
        <script>
    $(document).ready(function() {
        $("div.panel_button").each(function() {
        $(this).click(

            function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()
                }); $("div#hide_button").click(<wbr>function(){              
            $("div#panel").animate({
                height: "0px"
            });
       });       
    });

    $(document).ready(function() {
        $("div.panel_button").each(function() {
            
       

            function(){ $("div#panel").animate({ height: "500px" }) .animate({
            height: "400px" }, "fast"); $("div.panel_button").toggle()
                }); $("div#hide_button").click(<wbr>function(){
            $("div#panel").animate({
                height: "0px"
     
            }, "fast"); 
          });       
    });
    </script>
    //etc

  8. #8
    Join Date
    May 2014
    Posts
    936
    Where are the DIV#panel you're trying to target? Shouldn't there be a unique ID for each? I mean, you have .panel_button's but where are the actual panels?

    Though I'm not sure how that jQuery garbage would handle that -- another reason I don't use JS frameworks, they just don't do things in a sensible manner

    ... and it's quite obviously using JS to do what is now CSS3's job.

    But seriously, STOP opening and closing <?php ?> so many times for NOTHING. It's probably also a REALLY bad idea to have your JS in the PHP -- more code for PHP to parse (even if it is just output) and harder to work with since you will end up scrolling up and down constantly, instead of simply having two separate editor windows open side-by-side.

    Your script also seems to be assigning three redundant animations at the same time -- which one should it be doing?

    Though I'd really have to see the content to figure out much more, again I have the feeling a good chunk of your markup and scripting is unneccessary... much less why do you have that massive object embed for christmas only knows what?

    Content AND behavior should dictate markup, so with no clue what your content is or what you're trying to open and close...

    Also, why in the PHP are you making extra variables for nothing on the result set, and fetching two copies of the result set (numeric and associative indexed) when all you're using is the associative version?

    I've been seeing a LOT of people doing that "variables for nothing" thing lately -- is there some garbage book or tutorial telling people to do that?
    Last edited by deathshadow; 07-31-2014 at 10:37 AM.
    Java is to JavaScript as Ham is to Hamburger.

  9. #9
    Join Date
    Sep 2006
    Posts
    31
    Thanks, I am going to look into CSS to do this, so far so good - but I am simplifying things. Thanks for your help!

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    It doesn't really matter how many times <?php ?> tags are used, for tidiness I would suggest that you use the HEREDOC method of outputting your HTML with text values written in to it, I noted that you have one element in the <object tag which was not wrapped with " marks, this could be part of the issue, the data= tag says data=<?php echo "$item_url";?> and not data="<?php echo $item_url;?>"
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    May 2014
    Posts
    936
    Quote Originally Posted by \\.\ View Post
    It doesn't really matter how many times <?php ?> tags are used
    unless bytecode caching isn't in place in which case it takes longer to parse.

    Quote Originally Posted by \\.\ View Post
    for tidiness I would suggest that you use the HEREDOC
    HEREDOC and tidiness... in the SAME SENTENCE? On what planet? Particularly the MESS that turns into if you've got values in there. (really I think HEREDOC, NOWDOC, double quote strings, and every other string method should be stricken from PHP -- but I say the same thing about <?php <?= and ?> so...)

    Quote Originally Posted by \\.\ View Post
    data=<?php echo "$item_url";?> and not data="<?php echo $item_url;?>"
    You are semi-right on that -- the SGML rules on which HTML is based can be pretty forgiving about that, but you're right, to have VALID modern markup, get those quotes in there.

    Technically if the value is a number or a string that uses no special characters, quotes around values were optional prior to HTML 4... and browsers till support it... but really browsers continue to support a lot of things they shouldn't -- like HTML 5.
    Java is to JavaScript as Ham is to Hamburger.

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Quote Originally Posted by deathshadow View Post
    HEREDOC and tidiness... in the SAME SENTENCE? On what planet? Particularly the MESS that turns into if you've got values in there. (really I think HEREDOC, NOWDOC, double quote strings, and every other string method should be stricken from PHP -- but I say the same thing about <?php <?= and ?> so...)
    Ummm, this planet.

    Seems that this code you would deem too untidy?

    PHP Code:
    echo <<<HEREDOC
        <div class="box col5"> 
            <h1>
    {$title}</h1> 
            <img src="
    {$source_image}" alt="Source Image"/> 
            <div class="panel_button" style="display:visible"> 
                <img src="../images/expand.png" alt="expand"> 
                <a href="#">
    {$item_title}</a>  
            <!-- .box.col5--></div> 
             
            <div class="panel_button" style="display:none"> 
                <img src="../images/collapse.png" alt="collapse"> 
                <a href="#"> Hide</a>  
            <!-- #hide_button.panel_button --></div> 
             
            <div class="panel_button" id="hide_button2" style="display:none;"> 
                <object 
                    type="text/html" 
                    data="
    {$item_url}
                    width="100%" height="800" 
                    style="overflow:auto; border:5px ridge blue" 
                ></object>       
    HEREDOC; 
    which has variables that contain the values to output.

    Unless code is being compiled, which in the case of anything web based, with the exception of Java, it is loose based coding and not strict, we have pillocks trying to apply compiled based strict coding to JavaScript and a following of people who agree, well if thats the case then JavaScript should have a compiler to output a binary that is delivered to the browser that then acts on that code.

    JavaScript was never meant to be use in a "Strict" coding environment because it is interpreted and the same goes for PHP.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  13. #13
    Join Date
    May 2014
    Posts
    936
    Quote Originally Posted by \\.\ View Post
    Seems that this code you would deem too untidy?
    I have trouble seeing the vars for the forest, which is why I prefer ', , '

    To me using plaintext as a end delimiter on a string is just... gah. WHY? What would POSSIBLY possess a developer to want to do that in the first place?!? Just TRYING to use the slowest string parsing method possible? That's WORSE that double quotes from an efficiency standpoint!

    Could just be my understanding how string parsing works at the low level makes me recoil in horror at a lot of the garbage that IMHO has no damned business in PHP in the first place.

    Quote Originally Posted by \\.\ View Post
    Unless code is being compiled, which in the case of anything web based, with the exception of Java, it is loose based coding and not strict, we have pillocks trying to apply compiled based strict coding to JavaScript and a following of people who agree, well if thats the case then JavaScript should have a compiler to output a binary that is delivered to the browser that then acts on that code.
    Not sure what you actually mean by that -- but since both JS and PHP are bytecode parsed before being sent to the interpreter, you COULD say they are semi-compiled the same way a lot of ROM basic's were. The difference is that they are not then further run through a JITC like .NET or JAVA -- but let's be frank, .NET and JAVA are INTERPRETED languages too no matter the wild "virtual machine" claims are thrown out there.

    But really, "compiled based strict coding"? Not sure what the devil you're even on about with that.

    Though I'm still wondering with the OP's code what the devil it's actually even targeting, why it needs all those stupid malfing style attributes, and what that mess of jQuery gibberish is even trying to accomplish.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles