JavaScript - Printing Web Part Using Javascript And Jquery
I'm newbie to javascript. I'm trying to print a web part in landscape orientation. I want to include CSS in java script and change the layout of the page. Here is the print code
Code: function printWebPart(tagid) { if (tagid) { var html = "<HTML>\n<head>\n"+ $("HEAD").html()+ "\n</head>\n<body >\n"+ $("#"+tagid).html()+ "\n</BODY>\n</HTML>"; var printWP = window.open("","printWebPart"); printWP.document.open(); printWP.document.write(html); printWP.document.close(); printWP.print(); printWP.close(); } } </script> and here is the css class : .landScape { width: 100%; height: 100%; margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3); } Please suggest how do i do this? Similar TutorialsHi Friends, I am come with a new query in jQuery. I have a listing form in which the details showed , the View more Details is implemented using Ajax. When Click "+" sign there is a loading image show First then the Result show there ... It's all working Fine , But I need a way to show Error I mean some time Server Response is success with Empty String on that time I need to catch same .... I explain code Below: Code: if(proceed) { $.ajax({ type: "POST", data: "key="+id, dataType: 'json', async: true, url: "<?php echo site_url(); ?>/server/view_serverdet/", beforeSend: function() { $('#view_load'+id).show(); $('#view_load'+id).addClass(class); }, complete: function(){ $('#view_load'+id).hide(); } }, success: function (server_msg) { if (null == server_msg) { var warning = "<font color=\"red\">Unable to load server details</font>"; $('#view_load'+id).html(warning); } else { // Working Fine! } But that error Just Show and Hide ... How I can show that Error there, If you have any idea , pls help me ASAP... Thankfully Anes P.A I have the following code that works fine: Code 1 Code: <script type="text/javascript"> AJS.AEV(window, 'load', function() { GB_show("Special Presentation", "http://www.site.net/temp/images/ads/special.jpg", 352, 600); }); </script> I also have the following code that works fine: Code 2 Code: function DoTheCookieStuff() { visited=getCookie('visited'); if (visited==null) { setCookie('visited','yes',365) MyWindow=window.open('http://www.site.com','MyWindow','toolbar=yes,location=yes,directories=no,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=640,height=480,left=1,top=1'); } } However, I want to replace the blue code in the Code 2 immediately above that opens the window with the red code in the Code 1 section that opens the GreyBox window. I tried the following but it's just not working: Code: function DoTheCookieStuff() { visited=getCookie('visited'); if (visited==null) { setCookie('visited','yes',365) AJS.AEV(window, 'load', function() { GB_show("Special Presentation", "http://www.site.net/temp/images/ads/special.jpg", 352, 600); }); } } Thank you. Hello, I'd like to know how do this with javascript: 1. <a id="id_a" href="#table">Go to the middle of the page"</a> When I click at this link I go to that table. I'd like to "go" to this table with javascript. Can you help me? Thank you so much! Hi All, I have a web application which has two DIV, one is main and one is child. I am having problem in printing multiple pages. There is a lot of data in the child DIV and i am using JavaScript functions to control the print functionality. When i print using window.print(), only the data on the main page currently being showed is printed. I further researched and checked out the Style.Overflow property. Now i am using divMain.style.overflow = "visible" After this the complete print comes. But in Firefox, the scroll bar disappears and only single page is left with no scroll bar . Now if after print i give divMain.style.overflow = "Auto" OR divMain.style.overflow = "Scroll", still the scroll bar doesn't come and if it comes then its inactive. I am unable to see the complete data on the page after the print is taken. The problem is not coming in I.E and the full data with scroll bar is recovered in I.E. Please help me how to get the normal page with full data and scroll bar after printing in Firefox. Hi, Can anyone help me on converting this code to jquery: Code: <html> <head> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> function showonlyone(thechosenone) { var noticecontent = document.getElementsByTagName("div"); for(var x=1; x < noticecontent.length; x++) { name = noticecontent[x].getAttribute("name"); if (name == 'noticecontent') { if (noticecontent[x].id == thechosenone) { noticecontent[x].style.display = 'block'; } else { noticecontent[x].style.display = 'none'; } } } } function showall(id) { showall.ud=showall.ud||false; var i=1; while (document.getElementById(id+i)){ document.getElementById(id+i).style.display=showall.ud?'block':'none'; i++; } showall.ud=!showall.ud; } </script> </head> <body> <center> <div id="parentdiv" > <div id="expandall" onmouseup="showall('noticecontent')" >OPEN/CLOSE ALL</div> <div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div> <div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div> <div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div> <div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div> <div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div> <div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div> </div> </center> </body> </html> thanks Hi, I have done a script in Jquery that resolved my problem in Firefox and Chrome but not in IE. Thought of going back to Javascript. Could you please update me the equivalent for this Jquery stuff. <script type="text/javascript"> jQuery(document).ready(function(){ var backSize = (${not empty param.backSize ? param.backSize : 0} + 1); $("#goBackResults").attr("href", "javascript:history.go(-" + backSize + ");"); var existingValue = 'backSize=' + (backSize-1); $("#when-did-i-buy .pageNum a").each(function(){ if ($(this).attr('href')) { var newValue = 'backSize=' + backSize; if ($(this).attr('href').search('backSize=')!=-1) { var t=$(this); t.attr('href', t.attr('href').replace(existingValue,newValue)); } else { $(this).attr('href', $(this).attr('href') + "&tabId=1&backSize=" + backSize); }} }); }); </script> Thanks, Ravi.P I have a code written in jquery which I have to transform to javascript. is there any tool for this or I have to do this manually? Please help.. Hello, posted this on dynamicdrive.com with no response, so I am trying this forum. I have been assigned to build a content locator. We cannot use a database and all content needs to load from same page. Based on my boss' design and client needs, this is what I came up with: http://contentx.com/content_locator/ I am using a Dynamic Drive script to power the dropdown and content underneath the drop down, http://contentx.com/content_locator/js/dd_cx_script.js and using a JQuery script to change the content in the window to the right. http://contentx.com/content_locator/...s_cx_script.js My questions a 1) Is there a better method to do this? (stupid question I know... of course there is!!) I would like it to be as simple as possible, no animation needed. Just need to have content from the DIV on the right side load content in the Main body div on the left (the box) 2)Is it possible to change the content on the right side when you select an option from the drop down? (say I select <option>Free Campaigns</option> I want the content to change on the right to match one of the free campagins) 3)Finally, my margins in IE 7 are all over the map, looks great in all other browsers, but in IE my TABS (colored green and blue) are about 10pixels up to high, and my belowcontent div on the left has a top margin of 12px below the dropdown... Thanks for any help, zack JAVASCRIPT (move.js); Code: <script type="text/javascript"> $().ready(function() { $('#ex3').jqDrag('.jqDrag').jqResize('.jqResize'); }); </script> HTML: Code: <script src="includes/js/move.js"></script> <div id="ex3" class="jqDnR"> <div class="jqHandle jqDrag"></div> <br /> MY DATA <div class="jqHandle jqResize"></div> </div> hi how can i make somethin like the menus A,b, bla bla one this site? http://www.kanzenanimes.net/animes I'm trying to build a gallery. So far I've used jquery for the scrolling thumbnails. The problem I am having is deciding which would be the best way to load the larger version of the thumbnails into a div? Currently I am using a jquery attribute replace, but the only problem I'm having is I want to use lightbox for the large images. Some of the images have text so they need to be big if the user would like to read them. Right now lightbox is working except that it doesn't understand what image it's on when you click on the large version. I believe this is because of the attribute replace. Here is where you can view the problem: http://www.tsutsumidaphoto.com/Mihoko/akiko3.php If you click on any thumbnail after the first then click on the large version it will bring up the first image then go from there. Any suggestions, I've tried for too long on my own! nevermind i figured it out myself
Hello! I am developing my personal website! And I am trying to implement it with JS completely. which means I need the page to be one front end page. But the back-end pages would be the ones which do the work and calculations! In other words and more explaination: I would like to have one "index.php" page that contains only a nav bar which handles the mission. Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content. I have done this already! but the problem is: "home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine :-\ Note: the loading has been done with those methods: .load(), $.ajax! -> same results! The conclusion: * "home.php" * "ContactMe.php" * "About.php" Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually? The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though! Thank you in advance for your informative posts! Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope! Hi guys, been running into some problems with all IE browsers and my jQuery Gallery from Galleryview. Background: I am using Java to do an image search and build up some HTML including the calls to run the galleryview scripts and return this back to the page using document.write() When I use the simple structure of placing the scripts and parameters into a sample page: Code: Code: <body> <script type="text/javascript" src="http://spaceforaname.com/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://spaceforaname.com/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100 }); }); </script> It works fine. When I try and pull all the scripts out of the page and inject them back in using document.write() I get an error on IE: Code: Code: sb.append("(function(){ document.write('" + " <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-1.3.2.min.js\"></script> " + " <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery.easing.1.3.js\"></script> " + " <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js\"></script> " + " <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js\"></script> " + " <script type=\"text/javascript\"> " + " $(document).ready(function(){ " + " $(\"#photos\").galleryView({ " + " panel_width: 800, " + " panel_height: 300, " + " frame_width: 100, " + " frame_height: 100 " + " }); " + " }); " + " </script> " +............+ "')})()"); The variable sb is a StringBuffer and is formatted and returned: Code: Code: nextPage.setValue(sb.toString()); nextPage.setEscapeHTML(false); return nextPage; This particular error in this case in IE(8) is: Object expected which I think is referring to the jQuery as the resulting images are displayed just not in Galleryview style. This is really wracking my brains and any and all help is appreciated. D. Hi How do I send an array created in jQuery or Javascript to PHP? (page will be redirected to PHP) I'm thinking of URL parameters right now, but wont that result to a long URL? Is there another optimized way of sending the array? Here's my script. Which doesn't work. Here's my script, this works fine... send_array_to_other_page.html Code: $(function(){ //DECLARE ARRAY var arr = new Array(); var i = 0; $('#form').submit(function(e){ e.preventDefault(); var value = $('#box').val(); var index = arr.length; var list = ''; //ADD VALUE TO ARRAY arr[index] = value; //OUTPUT VALUES IN ARRAY for (var index in arr){ list+=index+': '+arr[index]+'<br/>'; $('#arrLength').html(arr.length); } //DISPLAY ARRAY $('#display').html(list); $('#form').get(0).reset(); //RESET FORM }); $('#send').click(function(){ window.location = 'send_array_to_other_page_2.php?list='+arr; }); }); This doesn't. It outputs Array content lost. Id also like to point out the the url of this page is send_array_to_other_page_2.php. Its missing the ?list= PHP Code: <?php $arr = $_GET['list']; echo 'The contents of the array are still... <br/>'; if(isset($arr)){ print_r($arr); } else { echo 'Array content lost'; } ?> I have created a php script that POSTs to another page sendmail.php which then redirects to a thanks/successful page. Is it possible to have the form submit and return a thank you message on the same page. basically submit the form without reloading. Hi guys Im try to create a menu (http://valkesh.000space.com/) that will have 2 or 3 images loaded when hovering the item. As it currently is, I would like the first 20px to show green, and the rest to show Red. For now I am only using colors because eventually I would like to use images and have the Left and Right pics set at a fixed width and the center image growing appropriately. Below is the script I am using for the entire menu. Code: <html> <head> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { //Append a div with hover class to all the LI $('#navMenu li').append('<div class="left"><div class="right"></div></div>'); $('#navMenu li').hover( //Mouseover, fadeIn the hidden hover class function() { $(this).children('div').fadeIn('1000'); }, //Mouseout, fadeOut the hover class function() { $(this).children('div').fadeOut('1000'); }).click (function () { //Add selected class if user clicked on it $(this).addClass('selected'); }); }); //]]> </script> <style type="text/css"> #navMenu { margin:0; padding:0; list-style:none; font-family:arial; text-align:center; line-height:60px; } #navMenu li { background-color:Gray; float:left; width:120px; height:40px; line-height:40px; border:solid 1px black; position:relative; } #navMenu li a { z-index:20; display:block; height:40px; position:relative; color:Black; } #navMenu li .left { background-color:Green; position:absolute; width:20px; height:40px; top:0px; z-index:0; display:none; } #navMenu li .right { background-color:Red; position:absolute; width:100px; height:70px; top:0px; z-index:0; display:none; } #navMenu li.selected { background-color:Blue; } </style> </head> <body> <ul id="navMenu"> <li><a href="#">Test 1</a></li> <li><a href="#">Test 2</a></li> <li><a href="#">Test 3</a></li> </ul> </body> </html> I would appreciate any help given! Thanks I am using the Mega Menu from http://www.javascriptkit.com/script/...megamenu.shtml and need some assistance with an adjustment. The menu is working great as provided. However, we have a fairly wide menu layout and I have received comments that it is visually distracting to have the menu fly out horizontally. We want to have the menu start out full width and only animate to drop down vertically. Is this possible? If so, where in jkmegamenu.js would I make this adjustment? Thank you. Paul i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why? i test it on this site: Quote: http://bowser.effectgames.com/~jhuck...rd/test10.html Code: $(document).ready(function(){ $("#d_clip_container").hover( function () { $(this).append($('<span class="tip">click to copy</span>')); }, function () { $(this).find("span:last").remove(); }); }) i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you. Hi! I couldn't find any information about this topic in the internet and I really wonder, how come people do not discuss it anywhere? Okay, jQuery works really great and offers many interesting effects, but what if you have JavaScript disabled? I mean I've browsed through several websites powered by jQuery with JS disabled and they doesn't work or behave weird. I know there aren't much people, who disable JS, but well I do want my page to be seen by all people in the end. I managed to do it with slider on my page (however I want to use other jQuery effects), but, for example, http://www.flowplaye...ools/index.html doesn't provide any information about this. Try to disable JS and see that nothing works. I can use <noscript></noscript> tag, but I have to make two main pages. And what if I want to view it on one page? What would you do? Regards, Aleks. |