www.webdeveloper.com
Results 1 to 4 of 4

Thread: Better way of doing Div replacement on the fly?

  1. #1
    Join Date
    Apr 2014
    Posts
    8

    Better way of doing Div replacement on the fly?

    Hi,

    I'm trying to dynamically replace div content on a single page via a replaceWith() jquery call. The way that I'm doing it now seems to be working, after a poop piles worth of trouble.

    There are two big problems that I am seeing right now. The first is the massive amount of '...'+ that I have to do within the script as jquery doesn't understand multi-line scripting. The second is I don't know if any of the replacement content within the script will be found by search engines.

    Does anyone know of a better method of doing this?

    Thanks in advance.
    Luke

    Code:
    <!doctype html>
    <html>
    <head>
    	<title>Company Name</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<link href="style.css" type="text/css" rel="stylesheet" />
    	<link rel="icon" href="favicon.ico" />
    	
    	<!-- Script section -->
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    
    <!-- this script handles slideshow -->
    
    <script src="js-image-slider.js" type="text/javascript"></script>
    
    <script id="menu_script">
    $(document).ready(function(){
      $(".serv_menu").click(function(){
      	if(this.getAttribute("value")== "services"){
      		
    		$("#sliderframe").replaceWith('<div id="sliderframe">'+
    		
    			'<div id="slider">'+
                	'<img src="FrontImage_RonFW.jpg" >'+
         			'<img src="FrontImage_SandraFWBusy.jpg" >'+
         			'<img src="EArBud_jpg.jpg" >'+
         			'<img src="motherPCBAradio_JPG.jpg" >'+
         			'<img src="HeadSet_jpg.jpg" >'+
         			'<img src="RadioHandSet_jpg.jpg" >'+
            	'</div>'+
            	
            	'</div>');
            $("#info_left").replaceWith('<div id="info_left">'+
    		
    			'<strong class="exp_blue">'+
    			'WHO WE ARE'+
    			'</strong>'+
    						
    			'<p class="small">'+
    			'We are an accomplished product development and design firm based in San Diego, California. Since 1995, we have been providing a full suite of engineering support from concept to production. Our in-house team of mechanical, electrical, and FW/SW engineers have broad experience in medical, commercial, and consumer products.'+
    			'<br><a class="exp_blue" href="/Pages/aboutus.aspx">Read More &raquo;</a>'+
    			'</p>'+
    			
    		'</div>');
    		$("#info_center").replaceWith('<div id="info_center">'+
    			'<strong class="exp_blue">'+
    			'WHAT WE DO'+
    			'</strong>'+
    			
    			'<p class="small">'+
    			'We help you make things happen. Our firm is flexible enough to work on a project alone or to collaborate with your engineers for development and design. Our breadth allows us to develop electromechanical and electronic products, embedded systems, manufacturing equipment, machine and fixture design, and fabrication of prototypes.'+
    			'<br><a class="exp_blue" href="/Pages/services.aspx">View Services &raquo;</a>'+
    			'</p>'+
    
    		'</div>');
    		
    		$("#info_right").replaceWith('<div id="info_right">'+
    		
    			'<strong class="exp_blue">'+
    			'MORE ON US'+
    			'</strong>'+
    
    		
    			'<p class="small">'+
    			'Company Name is structured and managed to either augment your engineering department or be your engineering department. We welcome a close working relationship and support it by giving our customers direct access to the engineers at all times.'+
    			'<br><a class="exp_blue" href="/Pages/contactus.aspx">Contact Us &raquo;</a>'+
    			'</p>'+
    			
    		'</div>');
    	//reset slider script
    	imageSlider.reload();
      	}
    
      	else if(this.getAttribute("value")== "mechanical"){
      	
      		$("#sliderframe").replaceWith('<div id="sliderframe">'+
    		
    			'<div id="slider">'+
                	'<img src="FrontImage_RonFW.jpg" >'+
         			'<img src="FrontImage_SandraFWBusy.jpg" >'+
         			'<img src="EArBud_jpg.jpg" >'+
         			'<img src="motherPCBAradio_JPG.jpg" >'+
         			'<img src="HeadSet_jpg.jpg" >'+
         			'<img src="RadioHandSet_jpg.jpg" >'+
            	'</div>'+
            	
            	'</div>');
            $("#info_left").replaceWith('<div id="info_left">'+
    		
    			'<strong class="exp_blue">'+
    			'WHO WE ARE'+
    			'</strong>'+
    						
    			'<p class="small">'+
    			'Mechanical Left Content'+
    			'<br><a class="exp_blue" href="/Pages/aboutus.aspx">Read More &raquo;</a>'+
    			'</p>'+
    			
    		'</div>');
    		$("#info_center").replaceWith('<div id="info_center">'+
    			'<strong class="exp_blue">'+
    			'WHAT WE DO'+
    			'</strong>'+
    			
    			'<p class="small">'+
    			'Mechanical Info Center'+
    			'<br><a class="exp_blue" href="/Pages/services.aspx">View Services &raquo;</a>'+
    			'</p>'+
    
    		'</div>');
    		
    		$("#info_right").replaceWith('<div id="info_right">'+
    		
    			'<strong class="exp_blue">'+
    			'MORE ON US'+
    			'</strong>'+
    
    		
    			'<p class="small">'+
    			'Mechanical Info Right'+
    			'<br><a class="exp_blue" href="/Pages/contactus.aspx">Contact Us &raquo;</a>'+
    			'</p>'+
    			
    		'</div>');
    	//reset slider script
    	imageSlider.reload();
    		}
    		
      	else if(this.getAttribute("value")== "electrical"){
      			alert("Electrical");
      		}
    	else if(this.getAttribute("value")== "programming"){
      			alert("Firmware");
      		}
    	else if(this.getAttribute("value")== "ID"){
      			alert("Industrial Design");
      		}
    	else{
      			alert("Services: No Selection");
      		}
    
      });
    });
    </script>
    
    	
    </head>
    
    <body>
    <div id="body_wrapper">
    	<div id="header">
    	
    		<div id="header_logo">
    			<a href="http://www.exp-eng.com" class="headerlogo"><img src="exp-eng-logo.jpg" alt="Homepage" ></a>
    		</div>
    		
    		<div id="header_menu">
    			<ul>
    				<li><a href="aboutus.aspx">About Us</a></li>
    				<li><a href="projects.aspx">Projects</a></li>
    				<li><a href="services.aspx">Services</a></li>
    				<li><a href="contactus.aspx">Contact Us</a></li>
    				<li><a href="resources.aspx">Resources</a></li>
    			</ul>
    		</div>
    		
    	</div>
    	
    <div id="divLinks">
    	<div id="content" >
    	
    		<div id="menu">
    	
    		<div id="menu_content">
    		
    			<ul>
    				<li class="serv_menu" value="services">Services</li>
    				<li class="serv_menu" value="mechanical">Mechanical</li>
    				<li class="serv_menu" value="electrical">Electrical</li>
    				<li class="serv_menu" value="programming">Firmware/Software</li>
    				<li class="serv_menu" value="ID">Industrial Design</li>
    			</ul>
    			
    		</div>
    		
    	</div>
    		
    		<div id="sliderframe">
    		
    			<div id="slider">
                	<img src="FrontImage_RonFW.jpg" >
         			<img src="FrontImage_SandraFWBusy.jpg" >
         			<img src="EArBud_jpg.jpg" >
         			<img src="motherPCBAradio_JPG.jpg" >
         			<img src="HeadSet_jpg.jpg" >
         			<img src="RadioHandSet_jpg.jpg" >
            	</div>
            	
            </div>
    
    		
    		<div id="info_left">
    		
    			<strong class="exp_blue">
    			WHO WE ARE
    			</strong>
    						
    			<p class="small">
    			We are an accomplished product development and design firm based in San Diego, California. Since 1995, we have been providing a full suite of engineering support from concept to production. Our in-house team of mechanical, electrical, and FW/SW engineers have broad experience in medical, commercial, and consumer products.
    			<br><a class="exp_blue" href="/Pages/aboutus.aspx">Read More &raquo;</a>
    			</p>
    			
    		</div>
    		
    		<div id="info_center">
    			<strong class="exp_blue">
    			WHAT WE DO
    			</strong>
    			
    			<p class="small">
    			We help you make things happen. Our firm is flexible enough to work on a project alone or to collaborate with your engineers for development and design. Our breadth allows us to develop electromechanical and electronic products, embedded systems, manufacturing equipment, machine and fixture design, and fabrication of prototypes.
    			<br><a class="exp_blue" href="/Pages/services.aspx">View Services &raquo;</a>
    			</p>
    
    		</div>
    		
    		<div id="info_right">
    		
    			<strong class="exp_blue">
    			MORE ON US
    			</strong>
    
    		
    			<p class="small">
    			Company Name is structured and managed to either augment your engineering department or be your engineering department. We welcome a close working relationship and support it by giving our customers direct access to the engineers at all times.
    			<br><a class="exp_blue" href="/Pages/contactus.aspx">Contact Us &raquo;</a>
    			</p>
    			
    		</div>
    		
    	</div>
    <!-- -------------------Div to be unhidden onclick ------------------------ -->	
    
    <!-- --------End unhidden divs -------------- -->	
    </div>
    
    	<div id="footer">
    	
    		<div id="footer_company">
    			<p class="right small">&#169;2014 Company Name | All Rights Reserved.</p>
    		</div>
    		
    		<div id="footer_menu">
    			<ul>
    				<li><a href="aboutus.aspx">About Us</a></li>
    				<li><a href="projects.aspx">Projects</a></li>
    				<li><a href="services.aspx">Services</a></li>
    				<li><a href="contactus.aspx">Contact Us</a></li>
    				<li><a href="resources.aspx">Resources</a></li>
    				<li><a href="sitemap.aspx">Site Map</a></li>
    			</ul>
    		</div>
    		
    	</div>
    
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2014
    Posts
    8
    CSS just in case

    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	height: 100%;
    	text-align:center; /*aligns body_wrapper to middle of page*/
    }
    
    /*-----------------------------------------ID----------------------------------------------------------*/
    
    /*--------------Header IDs-------------------*/
    
    /*Controls a wrapper for entire page*/
    #body_wrapper{
    	width:960px;
    	height:679px;
    	background-color:white;
    	font-family: "ms serif", ariel, serif;
    }
    
    
    /*Controls Large Header Wrapper position and styling*/
    #header {
    	position:relative;
    	top:0;
    	width: 100%;
    	height: 119px;
    	background-color: white;
    	background: url('newheadertemplate.jpg') repeat top left;
    	overflow:hidden;
    }
    
    /*Controls Header link styling */
    #header a{
    	color:white;
    	text-decoration:none;
    	
    }
    
    
    /*Controls Header logo styling and position */
    #header_logo {
    	position:absolute;
    	left:10px;
    	bottom:20px;
    }
    
    /*Controls header logo picture styling */
    #header_logo img{
    	border:1px white;
    }
    
    /*Controls header menu styling and position */
    #header_menu {
    	position:absolute;
    	float:right;
    	right:5px;
    	bottom:10px;
    	font-size:1em;
    	font-weight:bold;	
    }
    
    /* Controls header list styling and position */
    #header_menu ul li {
    	list-style-type:none;
    	display:inline;
    	padding:0px 10px;
    	margin: 5px;
    		
    }
    
    /*----------------------------------Content IDs------------------------------------------*/
    
    /*Controls large content wrapper position and styling*/
    #content {
    	position:relative;
    	display:block;
    	float:left;
    	width:960px;
    	height:500px;
    	background-color: white;
    	text-align:center;
    	overflow:hidden;
    }
    
    /*---------------Menu IDs---------------------*/
    
    /*Controls large menu wrapper position and styling*/
    #menu{
    	position:relative;
    	display:block;
    	float:left;
    	left:0;
    	width:250px;
    	height:355px;
    	margin-right:10px;
    	background-color:white;
    	text-align:right;
    	overflow:hidden;
    }
    
    /*Controls menu link styling */
    #menu a{
    	text-decoration:none;
    }
    
    
    /*Controls the menu content position and styling*/
    #menu_content{
    	position:absolute;
    	/*bottom:95px;*/
    	top:25px;
    	right:0;
    	background-color:white;
    	display:block;
    }
    
    
    /*Controls the menu list style */
    #menu_content ul li{
    	list-style-type:none;
    }
    
    
    /*------------------Gallery ID----------------------*/
    
    /*Controls gallery position and style in content div */
    #sliderframe{
    	position: relative;
    	float:left;
    	height: 354px;
    	width: 690px;
    	margin: 2px 2px;
    	padding:2px;
    	/*border:2px black solid;*/
    	background-color:white;
    	display:inline-block;
    }
    
    /*Addition control for js gallery*/
    /*--------------------------------*/
    #slider, #slider div.sliderInner {
        width:690px;
        height:306px;/* Must be the same size as the slider images */
    }
    
    #slider, #slider div.sliderInner {
        width:690px;height:306px;/* Must be the same size as the slider images */
    }
    
    #slider {
    	background:#fff url(loading.gif) no-repeat 50% 50%;
    	position:relative;
    	margin:0 auto; /*center-aligned*/
        transform: translate3d(0,0,0);
        box-shadow: 0px 1px 5px #999999;
    }
    
    /* image wrapper */
    #slider a.imgLink, #slider div.video {
    	z-index:2;
    	position:absolute;
    	top:0px;left:0px;border:0;padding:0;margin:0;
    	width:100%;height:100%;
    }
    #slider .video {
    	background:transparent url(video.png) no-repeat 50% 50%;
    }
    
    /* Caption styles */
    #slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
    	position:absolute;
    	width:100%;
    	height:auto;
    	padding:10px 0;/* 10px will increase the height.*/
    	left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
    	bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
    	z-index:3;
    	overflow:hidden;
    	font-size: 0;
    }
    #slider div.mc-caption-bg 
    {
        /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
    	background:Black;/* or any other colors such as White, or: background:none; */
    }
    #slider div.mc-caption-bg2 {
        background:none;
    }
    #slider div.mc-caption {
    	font: bold 14px/20px Arial;
    	color:#EEE;
    	z-index:4;
    	text-align:center;
        background:none;
    }
    #slider div.mc-caption a {
    	color:#FB0;
    }
    #slider div.mc-caption a:hover {
    	color:#DA0;
    }
    
    
    /* ------ built-in navigation bullets wrapper ------*/
    /* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */
    #slider div.navBulletsWrapper  {
        top:320px;/* Its position is relative to the #slider */
    	text-align:center;
    	background:none;
    	position:relative;
    	z-index:5;
    }
    
    /* each bullet */
    #slider div.navBulletsWrapper div 
    {
        width:11px; height:11px;
        font-size:0;color:White;/*hide the index number in the bullet element*/
        background:transparent url(bullet.png) no-repeat 0 0;
        display:inline-block; *display:inline; zoom:1;
        overflow:hidden;cursor:pointer;
        margin:0 6px;/* set distance between each bullet*/
    }
    
    #slider div.navBulletsWrapper div.active {background-position:0 -11px;}
    
    
    /* --------- Others ------- */
    
    #slider div.loading 
    {
        width:100%; height:100%;
        background:transparent url(loading.gif) no-repeat 50% 50%;
        filter: alpha(opacity=60);
        opacity:0.6;
        position:absolute;
        left:0;
        top:0; 
        z-index:9;
    }
    
    #slider img, #slider>b, #slider a>b {
    	position:absolute; border:none; display:none;
    }
    
    #slider div.sliderInner {
    	overflow:hidden; 
    	-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
    	position:absolute; top:0; left:0;
    }
    
    #slider>a, #slider video, #slider audio {display:none;}
    /*-------------------------------*/
    
    /*Controls left information position and style in content div */
    #info_left{
    	/*position: absolute;
    	bottom:0;
    	left:0;*/
    	position:relative;
    	float:left;
    	height: 125px;
    	width: 316px;
    	margin:2px;
    	background-color:white;
    	display:inherit;
    	/*border:2px black solid;*/
    	text-align:left;
    }
    
    /*Controls center information position and style in content div */
    
    #info_center{
    	position:relative;
    	float:left;
    	height:125px;
    	width:316px;
    	margin:2px;
    	background-color:white;
    	display:inherit;
    	text-align:left;
    }
    
    /*Controls right information position and style in content div */
    #info_right{
    	/*position: absolute;
    	bottom:0;
    	right:0;*/
    	position:relative;
    	float:left;
    	height: 125px;
    	width: 316px;
    	margin:2px;
    	background-color:white;
    	display:inherit;
    	/*border:2px black solid;*/
    	text-align:left;
    	
    }
    
    /*--------------Footer IDs---------------------*/
    
    /*Controls Large Footer wrapper position and styling*/
    #footer {
    	position:relative;
    	bottom:0;
    	width: 100%;
    	height: 60px;
    	background-color:#eeeeee;
    	/*background: url('newheadertemplate.jpg') repeat top left;*/
    	overflow:hidden;
    	clear:both;
    }
    
    /*Controls footer link styling */
    #footer a{
    	color:#308ecb;
    	text-decoration:none;
    }
    
    /*Controls footer menu styling and position */
    #footer_menu {
    	position:absolute;
    	right:5px;
    	bottom:1px;
    	font-size:.75em;
    }
    
    /* Controls footer list styling and position */
    #footer_menu ul li {
    	list-style-type:none;
    	display:inline;
    	padding:0px 2px;
    }
    
    /* Controls footer company position */
    #footer_company {
    	position:absolute;
    	top:2px;
    	right: 5px;
    	padding:0px 2px;
    }
    
    
    /*--------------------------------------------Classes-----------------------------------------------------*/
    
    /*Controls red ISO text on front page */
    p.red { 
    	color: #ff0000; 
    	font-size: 1.25em; 
    	line-height: 1em; 
    	text-align: right; 
    	margin-top:2px;
    	margin-bottom: 2px;
    }
    
    /*Controls red ISO text link on front page */
    .red a:link {
    	color: #ff0000;
    	text-decoration:none;
    }
    
    /*Controls red ISO text link on front page */
    .red a:visited {
    	color: #ff0000;
    	text-decoration:none;
    }
    
    /*Controls red ISO text link on front page */
    .red a:hover {
    	color: #fff;
    	text-decoration:none;
    	background-color: #ff0000;
    }
    
    /*Controls black ISO company text on front page */
    .caps { 
    	color: #000; 
    	font-size: 1.25em; 
    	line-height: 1em; 
    	text-align: right;
    	margin-top:2px;
    	margin-bottom: 2px;
    }
    
    /*Aligns item to the right*/
    .right {
    	text-align:right;	
    }
    
    /*Makes item small with small line spacing */
    .small {
    	font-size:.8em;
    	margin-top:2px;
    	margin-bottom:2px;
    	
    }
    
    /*Makes item expertise engineering blue */
    .exp_blue{
    	color:#308ecb;
    }
    
    /*-----End----*/

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    Hiya again. I didn't really read the code you submitted, but I understand what you're looking for, and based on the previous threads workings I did this for you as an example:

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link href="style.css" type="text/css" rel="stylesheet" />
    		<link rel="icon" href="favicon.ico" />
    		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    		<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    		<script type="text/javascript">
    
    			$(document).ready(function()
    			{
    				var sections = {};
    				function show(section)
    				{
    					var i;
    					for (i in sections) {if (sections.hasOwnProperty(i)) {
    						if (section === undefined) {section = i;}
    						sections[i].style.display = (i === section) ? '' : 'none';
    					}}
    				}
    				$(".serv_menu").each(function()
    				{
    					var value = this.getAttribute("value");
    					sections[value] = document.getElementById(value);
    					this.onclick = function() {show(value);};
    				});
    				show();
    			});
    
    		</script>
    	</head>
    	<body>
    
    		<div id="menu_content">
    			<ul>
    				<li class="serv_menu" value="services">Services</li>
    				<li class="serv_menu" value="mechanical">Mechanical</li>
    				<li class="serv_menu" value="electrical">Electrical</li>
    				<li class="serv_menu" value="firmware">Firmware/Software</li>
    				<li class="serv_menu" value="ID">Industrial Design</li>
    			</ul>
    		</div>
    
    		<div id="services" style="margin: 10px; padding: 10px; border: 1px dashed #f00;">SERVICES CONTENT</div>
    		<div id="mechanical" style="margin: 10px; padding: 10px; border: 1px dashed #f00;">MECHANICAL CONTENT</div>
    		<div id="electrical" style="margin: 10px; padding: 10px; border: 1px dashed #f00;">ELECTRICAL CONTENT</div>
    		<div id="firmware" style="margin: 10px; padding: 10px; border: 1px dashed #f00;">FIRMWARE CONTENT</div>
    		<div id="ID" style="margin: 10px; padding: 10px; border: 1px dashed #f00;">INDUSTRIAL CONTENT</div>
    
    	</body>
    </html>
    Hope it helps.
    JavaScript: Learn | Validate | Compact

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    For those large blocks of concatenated HTML, I've used SCRIPT tags:

    HTML Code:
    <script type="text/html" id="foo">
        <img src="..">
        <p>Blah blah</p>
    </script>
    Then in JavaScript:

    Code:
    $("#info_center").replaceWith( $("#foo").html() );
    ...jquery doesn't understand multi-line scripting.
    {NITPICK}
    To be very clear, this is JavaScript. jQuery is a DOM manipulation library, not a language.
    {/NITPICK}

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