#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    208
    Rep Power
    0

    Exclamation How to locate Iframe DIV id find and Hide..


    I am trying to get to see if a specific label id HTML is '*gender' is visible and if it is hide another ID located on the parent to the iframe.

    Please advise:

    Here is my snippet of code.

    Code:
                var TabLink = ($('#registerIframeArtist').contents().find('#jsnamemsg').html() == '*Gender');
    			//alert(TabLink);
    			if(TabLink){
    			 $('#tab-holder').hide();
    			}
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    One way to do this; would be something along these line:

    [code=Main Page]<script>
    $("#registerIframeArtist").load(function(){
    var TabLink = $(this).contents().find("#jsnamemsg").html();
    var getStyle = TabLink.match("visibility: hidden");
    if(getStyle == "visibility: hidden") {
    $('#tab-holder').show()
    }
    else {
    $('#tab-holder').hide()
    }
    });
    </script>[/code]
    [code=iFrame Page]<div id="jsnamemsg">
    <div id="gender">
    Male
    </div>
    </div>

    <script>
    $("document").ready(function(){
    $("#gender").css("visibility","visible");
    });
    </script>[/code]
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    208
    Rep Power
    0
    I seem to be lill bit off:

    this line

    Code:
    var getStyle = TabLink.match("visibility: hidden");
    alert is stating Null, no value no setting of match.

    Please advise....
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    208
    Rep Power
    0

    Exclamation need help with jquery if and div being visibile


    Tried Several ways:

    Code:
    				joms.jQuery("#registerIframeArtist").load(function(){
    				var TabLink =  joms.jQuery(this).contents().find("#jsnamemsg").html();
    				var getStyle = TabLink.match("visibility: hidden"); 
        			 if(joms.jQuery(getStyle == "visibility: hidden")) {
    				    joms.jQuery('#tab-holder').show()
    				 }
    				 else {
    				    joms.jQuery('#tab-holder').hide()
    				 }
    				});
    I have placed alerts on getStyle, comes back with "NULL"..

    I am lost
    Last edited by danjapro; June 25th, 2013 at 11:50 AM. Reason: need help with jquery if and div being visibile
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    It's probably because your viewing it locally; your probably going to have to add them to a server/web host, to see it in action. As it's a browser security risk to access/get the content of an iFrame locally. The code I provided you; I wrote and tested on a server/web host and there... it worked fine.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    208
    Rep Power
    0
    Web Loone08,

    You did great job with example, but for some reason.

    I incorporated those changes as you had them set and I placed and alert on main page script for getStyle

    It keep alerting null.
    alert(getStyle);

    Testing on our production Server, so we are in exact environment we need it to work properly.
    Please advise, what I'm I missing here
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    I missed that; looks like changed my code. Why did you add "joms.jQuery" to the code, that I provided you; it worked fine prior to that? Try testing my original code and see what happens.

    EDIT: Just did a re-test; with my original code and... it works just fine. You might want to 86 the Joomla or whatever that "joms" is referring to.
    Last edited by web_loone08; June 25th, 2013 at 12:52 PM. Reason: Re-Tested: Got Same End Results - Worked Fine
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    Oh, ok... I did not test in IE, until just now; so I see where you were getting the null @ with match(). Ok, let's try this (a revamp of sorts... you might say); add this to your main page (with iFrame in it):
    Code:
    $("#registerIframeArtist").load(function(){
    var TabLink = $(this).contents().find("#jsnamemsg").html();
    var getStyle = TabLink.match("visibility: hidden");
     // IE Workaround Condition
     if(getStyle == null) {
       $('#tab-holder').show();
     }
     // Normal Browser Condition
     else if(getStyle == "visibility: hidden") {
       $('#tab-holder').show()
     }
     else {
       $('#tab-holder').hide()
     }
    });
    When I tested, in IE (with above code); it circumvented "match() = null"; so this should do the trick.
  16. #9
  17. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    Ok, scratch the above and go with this; I think it will work better and have less chances for errors:
    Code:
    $("#registerIframeArtist").load(function(){
    var TabLink = $(this).contents().find("#jsnamemsg").html();
    var getStyle = TabLink.split("style=\"")[1].toLowerCase().split("\"")[0].replace(";",""); 
     if(getStyle == "visibility: hidden") {
       $('#tab-holder').show()
     }
     else {
       $('#tab-holder').hide()
     }
    });
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    208
    Rep Power
    0
    It should work all that changes is $ ro joms.Jquery, everything else remains as needed.

    Thats jsut so I don't need to add another jquery library, I am just using the joomla added jquery.

    keeps it simple.

    That should not affect the workings of what it should do $ versus joms.jquery.

    Please advise, I maybe wrong...
  20. #11
  21. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    The last code, that I posted; will work cross browser. So, if you test the code, just as I wrote it; it will work. I cannot say with any positivity, that the Joomla jQuery extensions will work with what I wrote; but, by itself... it works fine (as I tested in: IE, FF, & Chrome).
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    208
    Rep Power
    0
    I agree with you excpet it does nto recognize this as condition:

    if(getStyle == "visibility: hidden") {

    What can we do different here.

    Is getStyle is visibility: hidden, tab-holder is displayed
    if is visibility: visible tab-holder is displayed.

    need to figure out, who to correctly wrote the getStyle == to check which condition it is and follow that.

    It currently doing same thins on both conditions
  24. #13
  25. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    Originally Posted by danjapro
    I agree with you excpet it does not recognize this as condition:

    if(getStyle == "visibility: hidden") {
    Uh, yes it does recognize it as a condition.

    Originally Posted by danjapro
    Is getStyle is visibility: hidden, tab-holder is displayed
    if is visibility: visible tab-holder is displayed.

    need to figure out, who to correctly wrote the getStyle == to check which condition it is and follow that.

    It currently doing same thins on both conditions
    Not true, I checked it and if you change the jQuery of the iFramed page; the css() visibility from visible to hidden or hidden to visible; you get two different effects. If #gender is visible; then #tab-holder is hidden (within your main page - not your iFrame page). And... if #gender is hidden; then #tab-holder is shown (in your main page - not your iFrame page). These statements are true for: IE, FF, and Chrome; not sure if your using another browser, but even so..., in theory; these statements should still remain true.
    Last edited by web_loone08; June 25th, 2013 at 03:17 PM.
  26. #14
  27. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    Hang on; let me paste the full HTML & JS together and then you can go from there:[code=Main Page]<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

    <div id="tab-holder">
    #tab-holder content here
    </div>

    <iframe id="registerIframeArtist" src="Register_iFrame_Artist_Page.html"></iframe>

    <script>
    $("#registerIframeArtist").load(function(){
    var TabLink = $(this).contents().find("#jsnamemsg").html();
    var getStyle = TabLink.split("style=\"")[1].toLowerCase().split("\"")[0].replace(";","");
    if(getStyle == "visibility: hidden") {
    $('#tab-holder').show()
    }
    else {
    $('#tab-holder').hide()
    }
    });
    </script>[/code]

    [code=Register_iFrame_Artist_Page.html]<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

    <div id="jsnamemsg">
    <div id="gender">
    Male | Female
    </div>
    </div>

    <script>
    $("document").ready(function(){
    $("#gender").css("visibility","visible"); // change second parameter of .css() to either "hidden" or "visible"
    });
    </script>[/code]If you still fill this does not work; you could always turn the "getStyle" variable to a string, with the JavaScript Global toString() function; but really I do not see how that will make that much difference.

    If I wrongly interpreted where the location of your "#tab-holder" is located; if it is in your iFramed page and not in your main page, then you will need to access it like so:
    Code:
    $(this).contents().find("#tab-holder").show()
    
    or...
    
    $(this).contents().find("#tab-holder").hidden()
    Although; if your doing that..., then why not just validate everything in your iFramed page; instead of using .content() and .find(), from your main page (to access the content of the iFramed page and validate it's content). That would just seem to be a more simple way; to do this jQuery validation..., in my opinion.
    Last edited by web_loone08; June 25th, 2013 at 03:34 PM.
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    208
    Rep Power
    0
    Got it, thank you for everything you have done.

    I got it working, had to re-write to fit my layout app needs, but you input was totally a big help.

    Much, much, much thanks for all you coding assistance.

    Fanhitz.com - check it out let us know what you think?

IMN logo majestic logo threadwatch logo seochat tools logo