Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts

    efficient way to change info, without database

    My boss has several projects where i need to change out information. I did one with an included file of several divs that are hidden/shown, depending on what the user clicks on. It got tedious. But I don't have access to mysql to set anything up.

    Now I'm doing another project, with a map and several hotspots that will bring up a div, with a pic/content/url. The div will be located on a different place on the page, depending on which map hotspot was clicked.

    So, with all those variables, I want to know an easier way to do this, where I can just have a list of variables to edit into one div, and not a series of divs to hide or show. It's just too inefficient.

    Problem is, like I mentioned before. I don't have access to the mysql on these projects. So I can't just set up a little database of info. Besides, it's only 20 to 50 different items.

    Right now, I just have something like this:

    The javascript:
    Code:
    $(function(){
        $("#hotspot_details1").hide();
        $("#hotspot1,#closer").on("click", function(){
        	$("#hotspot_details2").hide();
            $("#hotspot_details1").toggle('fast', function() { /* Animation complete.*/ });
        });
    });
    
    $(function(){
        $("#hotspot_details2").hide();
        $("#hotspot2,#closer2").on("click", function(){
        	$("#hotspot_details1").hide();
            $("#hotspot_details2").toggle('fast', function() { 
    		$("#hotspot_details2").stop().animate({ opacity: 1 }, 1400, function() { /* animation complete */ });
    	});
        });
    });
    // and this would run on for hotspots 1 - 30. Yikes!
    and the html would include these items that pop-up:
    Code:
    <img id="hotspot1" class="hotspots" src="images/transp.gif" style="">
    					 	
    <img id="hotspot2" class="hotspots" src="images/hotspot.gif" style="">
    
    <!-- and so on, hotspot images 3 - 30 -->
    <!-- when the img is clicked, its corresponding div below appears: -->
    					 	
    					 	<!-- DIV FOR HOTSPOT 1 /////////////////////////////////////////////////////////////////////////////////// -->
    						
    						<div id="hotspot_details1" class="hotspot_details" style=" ">
                            	<div class="hotspot_bg" style="">
                            		<div style="height:20px;overflow:visible;position:absolute; width:20px;cursor:pointer;top:-106px;left:5px;">
                                		<img id="closer" src="images/closer.png" style="height:20px;">
                                	</div>
                                
                                	<div id="pc1" class="popup_copy" style="height:0px;overflow:visible;background-color:white;">
                                		<img style="margin-top:-112px;" src="images/spot1_image.jpg">
                                		<p class="popup_pgraph">
                                			The ASDF is situated etcetera lorem ipsum dolor set amet et plurit anudim. lorem ipsum dolor set amet et plurit anudim
                                		</p>
                                	</div>
                               	</div>
    						</div>
    						
    						<!-- DIV FOR HOTSPOT 2 //////////////////////////////////////////////////////////////////////////////////////////// -->
    						
    						<div id="hotspot_details2" class="hotspot_details" style="">
    							<div class="hotspot_bg" style="">
                            		<div style="height:20px;overflow:visible;position:absolute; width:20px;cursor:pointer;top:-106px;left:5px;">
                                		<img id="closer2" src="images/closer.png" style="height:20px;">
                                	</div>
                                
                                	<div  id="pc2" class="popup_copy" style="height:0px;overflow:visible;background-color:white;">
                                		<img style="margin-top:-112px;" src="images/map_hotspots/spot2_image.jpg">
                                		<p class="popup_pgraph">
                                			adfasdf is situated etcetera lorem ipsum dolor set amet et plurit anudim. lorem ipsum dolor set amet et plurit anudim
                                		</p>
                                	</div>
                                </div>
    						</div>
    						
    						
    						<!-- ///////////////////// and again.. this would continue for another 27 divs ... ack! //////////////////////////// -->
    
    </div> 
    					
    				<div id="close_the_map">
    					<a href="javascript:void();" id="mapcloser" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('mapBox').style.display='none';"> 							
    						<img src="images/close_5.png" border="0"> <!-- 'CLOSE THE MAP' ICON -->
    					</a>
    				</div>
    				
    				<div style="height:0px;overflow:visible;">
    					<img id="the_map" src="images/examples/map.jpg" > <!-- HERE'S THE MAP BACKGROUND -->
    				</div>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,334
    Thanks
    11
    Thanked 587 Times in 568 Posts
    so what are you trying to implement if you don't want to have all the divs on the page?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts
    I'm hoping there's a way to just edit the elements of one single div.

    I thought I'd seen there's a way to do this with xml, but I've never done anything before like that. This way somebody could go in, edit the information, without affecting the code. And there wouldn't be 30 divs to load, sift through, etcetera.

    I've gotten to this point with simplifying the function, but nothing regarding the information... this still just chooses which div is showing:


    Code:
    $(function(){
        $("#hotspot_details1").hide();
        $(".hotspots,#closer").on("click", function(){
        
        	var which_hotspot = $($(this)).attr("id");
        	var n = which_hotspot.split("_")[1];
        	var show_this_info = "#hotspot_details"+n 
        	alert(show_this_info);
        $(".hotspots").css({display:'none',opacity:'0'});
            $(show_this_info).css({display:'block',opacity:'1'});
        });
    });

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,334
    Thanks
    11
    Thanked 587 Times in 568 Posts
    Quote Originally Posted by turpentyne View Post
    I'm hoping there's a way to just edit the elements of one single div.

    I thought I'd seen there's a way to do this with xml, but I've never done anything before like that. This way somebody could go in, edit the information, without affecting the code. And there wouldn't be 30 divs to load, sift through, etcetera.

    ok, if you have one single div, then what are the other 29 are for?
    i'm assuming you need all 30, so what's not clear is where you want the content of those divs if not on the page.

    you can put them in an external file, html or xml, but there would still be 30 of the to sort through when making an edit. with xml, there would be 30 <item>s instead of 30 <div>s, not much gain....

    did you one each one in a separate file?


    the ability to store 30 sections externally and use JS to inject them is simple, but it's not clear (at least to me) where those sections are supposed to live and be edited...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    not sure if I'm getting it either, but if the divs are all basically the same and the click functions are all basically the same, would it make sense to store the relevant hotspot information in an object and use the hotspots to decide which information to show, just using one click function?

    you would still have to edit the object, but you could at least only have on div in the html (and I'm guessing this is the repetition you want to avoid?) - you could even move it around the page, depending on what info you have stored in the objects.

    or does that get you back to the start again?


  •  

    Posting Permissions

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