I have navigation, with a dropdown subnav that gives them two options (level 6 and level 10). If they click on one or the other, it loads "views.php" then uses .html to write the correct information to sections. The img src portion isn't working???

I also tried just using .html to replace the entire contents, instead of just the image src, but it still doesn't work.

$('#level_six,#level_ten').live("click", function(event){       
        if (!$('.tnav-views').hasClass("selected")) {

        var chosen = $(this);

        $('#view_levels_subnav').addClass('selected').css('display','block').fadeTo("slow", 1 );
        $('.content').fadeTo('slow', 0, function() {
            $('.content').load('inc/floorplans/views.php', function() {
                $('.content').fadeTo("slow", 1 );

                if(chosen.attr("id") == "level_six") {
                    $("#floorswitch_link").html("SEE LEVEL 10 ››").addclass("gototen");
                    $("#floorswitch_header").html("EAST - LEVEL 6");
                    $("#view_east").html("<img id=\"eastview\" src=\"images/views/6th_east_sm.jpg\">");

                } else if(chosen.attr("id") == "level_ten") {
                    $('#floorswitch_link').html(' SEE LEVEL 6 &rsaquo;&rsaquo;').addclass("gotosix");
                    $("#floorswitch_header").html("EAST - LEVEL 10");   
                    $("#view_east").html("<img id=\"eastview\" src=\"images/views/10th_east_sm.jpg\">");

                } else {
                    $('#floorswitch_link').html(' SEE LEVEL 10 &rsaquo;&rsaquo;').addclass("gototen");
                    $("#floorswitch_header").html("EAST - LEVEL 6");
                    $("#view_east").html("<img id=\"eastview\" src=\"images/views/6th_east_sm.jpg\">");


here's the html:

<div class="views">
    <div class="article">
        <h2 class="h2_whiteBg">VIEW: <span id="floorswitch_header"> EAST - LEVEL 6 <!-- here I can change out info for what view is seen --></span></h2> 
        <div id="floorswitch_link">&nbsp;</div>   

    <div class="view_selected" id="view_east" style="">
         <img id="eastview" src="images/views/6th_east_sm.jpg"> 

    <div class="views_div" id="view_north" style="">
        <img id="northview" src="images/views/6th_north_sm.jpg">
    <div class="views_div" id="view_west" style="">
        <img id="westview" src="images/views/6th_west_sm.jpg">
    <div class="views_div" id="view_south" style="">
        <img id="southview" src="images/views/6th_south_sm.jpg">

<!-- the replacement divs -->

        <div id="SubMenu"> 
                <ul id="views_submenu" style="line-height:2em;z-index:2;float:left;padding-right:10px;">
                    <li><a style="color:#000;" class="views_submenu link_selected" id='link_east' href='#'>EAST</a></li>
                    <li><a style="color:#000;" class="views_submenu" id='link_north' href='#'>NORTH</a></li>
                    <li><a style="color:#000;" class="views_submenu" id='link_west' href='#'>WEST</a></li>
                    <li><a style="color:#000;" class="views_submenu" id='link_south' href='#'>SOUTH</a></li>


4 Years
Discussion Span
Last Post by EvolutionFallen

Maybe I'm missing something, but you don't have any elements with id level_six or level_ten? What's triggering the click event?

Edited by EvolutionFallen


Also, you need to load in a new Image object. You can't just add the tag and change the src attribute, you need to grab the data from the server. You can insert this right before line 17:

var img = new Image();

Then change your lines 21, 27, 33, to $(img).load("your/path/here");.
Then $('#view_east').html(img);

Haven't tested, think it'll work though.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.