sunicani Posted August 26, 2009 Share Posted August 26, 2009 I am coding a function with javascript in order to show or hidden product description via click on 'more' or 'minimize', and the html code shown below, <html><head></head><body><div id="brandlist_cellphones"><div id="product_images"><img src="nokia.jpg" alt="Pharos Traveler 137 Black Cell Phone" onclick="" onmouseover="" onmouseout=""></div><div id="product_description"><h1>Pharos Traveler 137 Black Cell Phone</h1><h4>GSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137</h4><p class="productCopyCase"><span>Description:</span> <span id="productDescriptionSnippet">The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDP...<a href="java script:swapProductDescription()" class="green" style="color:#528C00" onClick="om_singleH_link('pgrabcom,pgrabusops,pgrabglobal','','prop36', 'top|read_more|327|-|search_getprod','top','75480063fd765bbd');">read more</a></span></p><div id="productDescriptionRaw">The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos’ proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather. <a id="productDescriptionHide" class="green" style="color:#528C00" href="java script:swapProductDescription()" onClick="om_singleH_link('pgrabcom,pgrabusops,pgrabglobal','','prop36', 'top|minimize|327|-|search_getprod','top','75480063fd765bbd');">minimize</a></div></div></div></body></html>alos. the effects like url http://electronics.pricegrabber.com/cell-p...+Phone/st=queryI really don't know how to scripting with Javascript to fulfill the function? any experts who can guide me in javascript section for the purpose of minimize and read morethanks a lot! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 26, 2009 Share Posted August 26, 2009 you have to set #productDescriptionRaw as display: none;you have to assign id to 'read more' link (id="readmore")onclick="swapProductDescription()" in BOTH above anchor links.<script type="text/javascript">/*<![CDATA[*//*---->*/function swapProductDescription(){var description=getElementById("productDescriptionRaw");var readmore=getElementById("readmore");var minimize=getElementById("productDescriptionHide");if(description.style.display == "none"){description.style.display="";minimize.style.display="";readmore.style.display="none";}else{description.style.display="none";minimize.style.display="none";readmore.style.display="";}}/*--*//*]]>*/</script> Link to comment Share on other sites More sharing options...
sunicani Posted August 26, 2009 Author Share Posted August 26, 2009 yeah, good job! thank you very much, mate. and, I have revised as you required. however, I could not get through it. maybe, I am a beginner, and can you write the whole html code as well as javascript for me? thanks, good man. Link to comment Share on other sites More sharing options...
sunicani Posted August 26, 2009 Author Share Posted August 26, 2009 I am coding a function with javascript in order to show or hidden product description via click on 'more' or 'minimize', and the html code shown below,alos. the effects like url I really don't know how to scripting with Javascript to fulfill the function? any experts who can guide me in javascript section for the purpose of minimize and read morethanks a lot! who can give me the entire html&javascript code? many thanks Link to comment Share on other sites More sharing options...
sunicani Posted August 26, 2009 Author Share Posted August 26, 2009 hi dsonesuk,I have followed your code and, made revision accordingly, maybe something wrong with my code? would you please get into my html code to check for me?or any experts associate with me? many thanks. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title><script type="text/javascript">function swapProductDescription(){var description=getElementById("productDescriptionRaw");var readmore=getElementById("readmore");var minimize=getElementById("productDescriptionHide");if(description.style.display == "none"){description.style.display="";minimize.style.display="";readmore.style.display="none";}else{description.style.display="none";minimize.style.display="none";readmore.style.display="";}}</script></head><body><div id="product_image"><img src="N97S.jpg" /></div><div id="product_desc"><h1>Pharos Traveler 137 Black Cell Phone</h1><h4>GSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137</h4><p class=""><span>Description:</span> <span>The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDP...<onclick="swapProductDescription()><a id="readmore" href="java script:swapProductDescription()" class="green" style="color:#528C00" onclick="swapProductDescription()">read more</a></span></p><div style="display:none" id="productDescriptionRaw">The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos' proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather.<a id="productDescriptionHide" class="green" style="color:#528C00" href="java script:swapProductDescription()" onclick="swapProductDescription()">minimize</a></div> </div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 26, 2009 Share Posted August 26, 2009 sorry i hadn't had my coffee yet! use belowvar description=document.getElementById("productDescriptionRaw");var readmore=document.getElementById("readmore");var minimize=document.getElementById("productDescriptionHide");another problemchange href="java script:blah blah" to href="java script:void(null)" WITHOUT space between java and script. nasty habit of adding a space when you paste here. Link to comment Share on other sites More sharing options...
alexnofue Posted August 26, 2009 Share Posted August 26, 2009 Hi, after following dsonesuk advice, you sould also remove the href="java script:swapProductDescription()" and the href="java script:swapProductDescription()"these two try to open a page with that location, with the onclick on those <a> is enoughthe anchors loose their underline but this can be styled.edit: dsonesuk got it first Link to comment Share on other sites More sharing options...
dsonesuk Posted August 26, 2009 Share Posted August 26, 2009 to account for non javascript page i suggest setting the styling for the link to style="color:#528C00; display:none;"and then adding window.onload=swapProductDescription;</script> Note: Just above closing tagthis will show all the content, without links if javascript disabled.orif enabled will run the javascript function to hide the main content, and now show the link for read more. Link to comment Share on other sites More sharing options...
sunicani Posted August 27, 2009 Author Share Posted August 27, 2009 thanks for you all, mates. the code all you wrote for me worked fine but, another question is when I click 'read more' on the original page in pricegrabber, it shown below, Pharos Traveler 137 Black Cell PhoneGSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137Add Pharos to FavoritesAs low as $489.99 from Dell HomeDescription: The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos’ proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather. minimizeHowever, mine shown like,Pharos Traveler 137 Black Cell PhoneGSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137Description: The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDP...The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos¡¯ proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather. minimizeso what's happening? I was really baffled, 555 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 27, 2009 Share Posted August 27, 2009 its hiding all the short discription + readmore link, and replacing it with a full description + minimize link Link to comment Share on other sites More sharing options...
dsonesuk Posted August 27, 2009 Share Posted August 27, 2009 Note: this allows for one paragraph of text ONLY for the short description,which includes the readmore link within it, anything not in the short description won't be hidden.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title><script type="text/javascript">function swapProductDescription(){var description=document.getElementById("productDescriptionRaw");var readmore=document.getElementById("readmore");var description_short=document.getElementById("product_desc");var description_short_p=description_short.getElementsByTagName("p");var minimize=document.getElementById("productDescriptionHide");if(description.style.display == "none"){description.style.display="";minimize.style.display="";readmore.style.display="none";description_short_p[0].style.display="none";}else{description.style.display="none";minimize.style.display="none";readmore.style.display="";description_short_p[0].style.display="";}}window.onload=swapProductDescription;</script></head><body><div id="product_image"><img src="N97S.jpg" /></div><div id="product_desc"><h1>Pharos Traveler 137 Black Cell Phone</h1><h4>GSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137</h4><p style="display:none" class=""><span>Description:</span> <span>The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDP...<a id="readmore" href="java script:void(null)" style="color:#528C00; display:none;" onclick="swapProductDescription()">read more</a></span></p><div id="productDescriptionRaw"><span>Description:</span> The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos' proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather.<a id="productDescriptionHide" class="green" style="color:#528C00; display:none;" href="java script:void(null)" onclick="swapProductDescription()">minimize</a></div></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 27, 2009 Share Posted August 27, 2009 this will creates short description from the main description, which will save you entering the content twice.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title><script type="text/javascript">function swapProductDescription(){var description=document.getElementById("productDescriptionRaw");var readlink="<a id=\"readmore\" href=\"java script:void(null)\" style=\"color:#528C00;\" onclick=\"swapProductDescription()\">read more</a>";var description_short=document.getElementById("product_desc");var description_short_p=description_short.getElementsByTagName("p");description_short_p[0].innerHTML=(description.innerHTML.substr(0,313)+"..."+readlink);var readmore=document.getElementById("readmore");var minimize=document.getElementById("productDescriptionHide");if(description.style.display == "none"){description.style.display="";minimize.style.display="";readmore.style.display="none";description_short_p[0].style.display="none";}else{description.style.display="none";minimize.style.display="none";readmore.style.display="";description_short_p[0].style.display="";}}window.onload=swapProductDescription;</script></head><body><div id="product_image"><img src="N97S.jpg" /></div><div id="product_desc"><h1>Pharos Traveler 137 Black Cell Phone</h1><h4>GSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137</h4><p style="display:none"></p><div id="productDescriptionRaw"><span>Description:</span> The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos' proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather.<a id="productDescriptionHide" class="green" style="color:#528C00; display:none;" href="java script:void(null)" onclick="swapProductDescription()">minimize</a></div></div></body></html> Link to comment Share on other sites More sharing options...
sunicani Posted August 28, 2009 Author Share Posted August 28, 2009 hi dsonesuk,it is so excited to got your help and, I am a freshman in javascript. thank you very much. :)cane Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.