JavaScript - Google Link To Modal Window
Hi.
I have a page in a modal window that fades in over the top of my site when clicked. When this page comes up in Google and is clicked it does not load up the site with the modal window over top, it just loads the content of the modal window on a full page. Is there a way to have the link on Google go to the page with the modal window over top? The modal window is "PrettyPhoto" using JQuery. Thanks in advance. Similar TutorialsHi all! I am struggling with getting a modal window to launch. The two problems I experience are as follows: 1) Images do not display in IE within the hidden <div> tags. (This I tested on another page less complicated. Click the "donate" button on this page using IE and firefox to see what I mean... http://www.clanreportdb.co.uk/report...ls.php?id=1473) 2) When integrating the <a> tag link to launch within PHP code, it fails to work. Here is my code, and hopefully someone will know what I am doing wrong: Code: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //When you click on a link with class of poplight and the href starts with a # $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Get Popup Name var popURL = $(this).attr('href'); //Get Popup href to define size //Pull Query & Variables from href URL var query= popURL.split('?'); var dim= query[1].split('&'); var popWidth = dim[0].split('=')[1]; //Gets the first query string value //Fade in the Popup and add close button $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/report/images/close.gif" border="0" class="btn_close" title="Close Window" alt="Close" /></a>'); //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; //Apply Margin to Popup $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); //Fade in Background $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies return false; }); //Close Popups and Fade Layer $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); //fade them both out }); return false; }); }); </script> <style type="text/css"> #fade { /*--Transparent background layer--*/ display: none; /*--hidden by default--*/ background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; } .popup_block{ display: none; /*--hidden by default--*/ background: <? echo $highlightbg; ?>; padding: 20px; border: 20px solid #ddd; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; /*--CSS3 Box Shadows--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 Rounded Corners--*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } img.btn_close { float: right; margin: -55px -55px 0 0; } /*--Making IE6 Understand Fixed Positioning--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; } </style> </head> </html> <?php foreach ($d as $f) { echo "{$f[1]}<a href=\"#?w=500\" rel=\"popup_name\" class=\"poplight\"><img src=\"/report/images/tick.gif\" border=\"0\"></a>"; ?> <html> <div id="popup_name" class="popup_block"> //CONTENT HERE eg. <? echo $f[2]; ?> //Image does not display in IE but does in firefox <img src="/report/yes.gif"> </div> </html> <? } ?> I am working on my homework. On my page, I need to make a modal window, which is just a picture has x or close letter, shows up whenever people open the page. So far, I called a picture with onload in a body and centered the picture. I don't know if there is anyway that I can just put x or close somewhere so that whenever people click x or close, the picture is not going to be visible ( promoPic.style.visibility = "hidden" this is my code for the picture. And I though I can just put input button or any letters inside of picture because its wrapped by paragraph, but, I can't. I guess I am miss understanding some concept? Code: <body onload="promoCenter()"><p><img src="http://codingforums.com/images/hauntedHouse.jpg" id="promoPic" alt="Haunted House" height="400" width="400" /></p> Hi, I am working on a project in which I have to open my flash demo in a modal window. I got all the code for modal window and it is working great. The only problem is I am not able to open a flash file in modal window. Can any one guide me or suggest me how should I fix this. Thanks in advance. Vikrant Hi, well i used soh tanaka inline modal window which is a popup window like lightbox. But it failed to work with IE9 RELEASED CANDIDATE VERSION. Can anyone tell me that why is it having issue with a better version of explorer. I have made a video to show the error, as to make it more easy to explain what i am saying. here is the link to it http://www.youtube.com/watch?v=pHi9ZlGyWc0 i would look forward to the replies. thank you. Hi, I have a JQuery modal window and I am trying to pass the value of its input field to a hidden input field within a form but I can not seem to get the value when it is in the modal window. Modal Window Code: Code: <div id="modal-content" class="clearfix"> <h2> enter a name</h2> <div> <input id="enteredName" name="enteredName" type="text" value="" /> <a href="javascript:submitform(true)" name="save" id="save" class="btn"><span>Save</span></a> </div> <a href="javascript:submitform(false)" id="close" class="close-link">No thanks just carry on</a> </div> Javascript to set the value of the hidden field to equal the value of the modal input field Code: <script type="text/javascript"> function submitform(assignName) { if (assignName) { var hiddenfield = document.getElementById("hiddenfieldid"); hiddenfield.value = document.getElementById("enteredName").value; } var form = document.getElementById("formTest"); form.submit(); } </script> Any help would be much appreciated. Hi, I am writing an application which needs to open a modal dialog window in a secure connection. I am able to open the dialog using HTTPS, but on the status bar I cannot see the SSL Padlock. The application is being written in .NET and the browser I use is IE 6.0. Any suggestions and feedback are welcome. Regards Totre On my main page, I have a list of item ID's which are assigned variables, the list is concatenated and so the variables are always different. So another thing that gets concatenated is a link, which uses javascript/jquery to open a popout modal window which is another php file called sharepost.php. I want to be able to transfer the php variables from the main page to append them on the end of the sharepost.php URL so I can use $_GET to grab them for use. Here's what I have... not working, but I figured I'd give it a try. Code: <?php //use mysql to loop through some variables $post_id = $setvalue; $member_id = $anothersetvalue; $list .= ' <div> ' . $post_id . ' </div> <div> ' . $member_id . ' </div> <div> <a href="#" class="button" onClick="openup(); return false">Share This Post</a> </div> $the_link = " http://sharepost.php?post_id=' . $post_id . '&member_id=' . $member_id . ' "; '; ?> <HTML> <head> <script> // Displays an external page using an iframe function openup(){ var src = "<?php echo $the_link;?>"; $.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', { closeHTML:"", containerCss:{ height:150, padding:0, width:350 }, overlayClose:true, }); } </script> </head> <body> <?php echo $list;?> </body> </HTML> Hey there everyone I'm a bit new to javascript and having a bit of a problem. I have a page users can click to upload a photo. When users click I want a modal window to pop up with a simple file upload input inside it and a submit button. I have this working except that when users click submit nothing happens. I'm using nyroModal http://nyromodal.nyrodev.com/#demos and the code I use is: Code: <a href="#test" class="nyroModal"><img src="/img/uploadimage.gif" alt="" /></a> <div id="test" style="display: none; width: 600px;"> <form id="ImageUploadForm" enctype="multipart/form-data" method="post" action="images/upload" accept-charset="utf-8"> <div style="display:none;"> <input type="hidden" name="_method" value="POST" /> </div> <div class="input file"> <label for="ImageFileName">File Name</label> <input type="file" name="data[Image][fileName]" id="ImageFileName" /> </div> <div class="submit"><input type="submit" value="Upload" /> </div> </form> </div> If I take the code out of the div=id"test" the form appears on the normal page and submits just fine. Inside the test div tho the modal window pops up with the form inside but the submit button does nothing. Can anyone enlighten me what I'm doing wrong? Hi Friends, I am really tired with Chrome , one of my window.open() Stuff work fine in FF and Opera in Fedora O.S. But Chrome Did not , my code is like: <script type="text/javascript"> function getpage(id, type){ $.ajax({ type: "POST", data: "key="+id, async: false, url: "<?php echo site_url(); ?>/server/precp/"+type, success: function (msg) { window.open("<?php echo site_url(); ?>/server/cplogin/"+msg, "autologin"); } }); } </script> and it call in another JavaScript function like: function doKeyup(id,e) { if(e == 13) { //alert("e:"+e); var cp = $("table#serverdata tbody tr#container_tr.row_no td:nth-child(7) a#cp").html(); var dc = $("table#serverdata tbody tr#container_tr.row_no td:nth-child(7) a#dc").html(); if(cp != null || dc != null ) { var firstId = $("table#serverdata tbody tr#container_tr.row_no td:nth-child(1) input[type=checkbox]").val(); } if(cp != null) { alert("Enter here"); getpage(firstId,'cp'); return false; } and it firstly call from onkeyup as : <input type="text" name="find_text0" id="find_text0" autocomplete="off" <?php if ('B' == $sb_pos) { ?> onfocus="document.getElementById('find_text1').value='';" <?php } ?> onkeyup = "return doKeyup('0',event.keyCode);" /> Please Give me a Solution ASAP. Thankfully Anes For my Javascript class, we are to take a code from the book and add on to it. In this code, I decided to add custom markers and info windows for each location. I got the info windows to work but they are the same for each marker. How can I fix this? Here is what I have: Code: <script> function init() { var myLatLng = new google.maps.LatLng(36.795209, -3.339844); var myOptions = { zoom: 2, center: myLatLng }; var map = new google.maps.Map(document.getElementById("map"), myOptions); //This is Location 1 var image = 'image1.jpg'; var canyon= new google.maps.Marker({ position: new google.maps.LatLng(35.9766,-113.7717), map: map, title:"Grand Canyon, USA"}); var infoWindow = new google.maps.InfoWindow({ content: "Grand Canyon, USA"}); google.maps.event.addListener(canyon, 'click', function(){ infoWindow.open(map, canyon); }); //This is Location 2 var image = 'image2.jpg'; var paricutin= new google.maps.Marker({ position: new google.maps.LatLng(19.5948,-102.4331), map: map, title:"Paricutin, Mexico"}); var infoWindow = new google.maps.InfoWindow({ content: "Paricutin, Mexico"}); google.maps.event.addListener(paricutin, 'click', function(){ infoWindow.open(map, paricutin); }); //This is Location 3 var image = 'image3.jpg'; var victoria= new google.maps.Marker({ position: new google.maps.LatLng(-17.928,25.826), map: map, title:"Victoria Falls, Zimbabwe"}); var infoWindow = new google.maps.InfoWindow({ content: "Victoria Falls, Zimbabwe"}); google.maps.event.addListener(victoria, 'click', function(){ infoWindow.open(map, victoria); }); //This is Location 4 var image = 'image4.jpg'; var reef= new google.maps.Marker({ position: new google.maps.LatLng(-17.98,146.76), map: map, title:"Great Barrier Reef, Austrailia"}); var infoWindow = new google.maps.InfoWindow({ content: "Great Barrier Reef, Austrailia"}); google.maps.event.addListener(reef, 'click', function(){ infoWindow.open(map, reef); }); //This is Location 5 var image = 'image5.jpg'; var harbor= new google.maps.Marker({ position: new google.maps.LatLng(-22.8424,-43.1502), map: map, title:"Harbor Rio De Janerio, Brazil"}); var infoWindow = new google.maps.InfoWindow({ content: "Harbor Rio De Janerio, Brazil"}); google.maps.event.addListener(harbor, 'click', function(){ infoWindow.open(map, harbor); }); //This is Location 6 var image = 'image6.jpg'; var everest= new google.maps.Marker({ position: new google.maps.LatLng(27.98783,86.92476), map: map, title:"Mount Everest Peak, Nepal"}); var infoWindow = new google.maps.InfoWindow({ content: "Mount Everest Peak, Nepal"}); google.maps.event.addListener(everest, 'click', function(){ infoWindow.open(map, everest); }); } google.maps.event.addDomListener(window, 'load', init); </script> I'm having trouble getting Google Chrome to print the correct content when I change the content of a modal page with JavaScript. This is my code: JavaScript: Code: function printCoupon(couponID) { var originalContents = document.body.innerHTML; var printable = document.getElementById(couponID); var printContents = printable.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; document.getElementById(couponID).scrollIntoView(true); } HTML: Code: <body> <div id="coupon1"><p>Coupon 1 contents</p></div> <div><a href="javascript:void(0)" onclick="printCoupon('coupon1');return false;">Print Coupon</a></div> <div id="coupon2"><p>Coupon 2 contents</p></div> <div><a href="javascript:void(0)" onclick="printCoupon('coupon2');return false;">Print Coupon</a></div> </body> This works in IE8 and FF 3.6, but Chrome 16 prints the original content, not the printable content. UPDATE: I just discovered another problem with this script. In IE9, the parent page is printed along with the modal (the modal looks transparent), instead of just the modal. I am trying to have a text link above Google Maps link to a marker on my map. When the link is clicked, the map will automatically center itself on the marker. I already have the custom markers and locations, I am just not that good with Javascript and jQuery to figure it out. I tried to use Code: <a href="javascript: map.panTo(new LatLng(25.2, 105.7))">Mexico</a> and the link shows up, but nothing happens. Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; font-size:10px; margin:0; } #content { } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(39.346246,-76.624446); var settings = { zoom: 15, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById("map_canvas"), settings); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<div id="bodyContent">'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var loyolaImage = new google.maps.MarkerImage('images/Loyola.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var loyolaShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(65, 50)); var loyolaPos = new google.maps.LatLng(39.3462326,-76.624446); var loyolaMarker = new google.maps.Marker({ position: loyolaPos, map: map, icon: loyolaImage, shadow: loyolaShadow, title:"Loyola", zIndex: 3}); var jhuImage = new google.maps.MarkerImage('images/Jhu.png', new google.maps.Size(150,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var jhuShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(60, 50) ); var jhuPos = new google.maps.LatLng(39.329157,-76.620477); var jhuMarker = new google.maps.Marker({ position: jhuPos, map: map, icon: jhuImage, shadow: jhuShadow, title:"Johns Hopkins", zIndex: 2 }); var fellsImage = new google.maps.MarkerImage('images/FellsPoint.png', new google.maps.Size(150,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var fellsShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(60, 50) ); var fellsPos = new google.maps.LatLng(39.28231,-76.593611); var fellsMarker = new google.maps.Marker({ position: fellsPos, map: map, icon: fellsImage, shadow: fellsShadow, title:"Johns Hopkins", zIndex: 4 }); var towsonImage = new google.maps.MarkerImage('images/Towson.png', new google.maps.Size(150,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var towsonShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(60, 50) ); var towsonPos = new google.maps.LatLng(39.3322248,-76.610944); var towsonMarker = new google.maps.Marker({ position: towsonPos, map: map, icon: towsonImage, shadow: towsonShadow, title:"Towson", zIndex: 1 }); google.maps.event.addListener(companyMarker, 'click', function() { infowindow.open(map,companyMarker); }); } </script> <script> google.maps.event.addDomListener(controlUI, 'click', function() { map.setCenter(chicago) </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:500px; height:300px"></div> <a href="javascript: map.panTo(new LatLng(39.393248,-76.610944))">Towson</a> </body> </html> Hi all , I need some help in altering the location tag and the View Larger Map links to open in a new window, currently it opens in the same window. I didn't set any links myself, they were already in the code that I got from Google Maps, I placed it on my page as a custom script. I tried to edit it myself and other frames on my page got all muddle up in preview !!!!! _THE CODE_ <iframe width="350" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&ll=37.109574,-8.030563&spn=0.011328,0.022724&t=h&z=16&output=embed"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&ll=37.109574,-8.030563&spn=0.011328,0.022724&t=h&z=16&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small> I have the code below and currently the user selects an option and clicks the go button and this links to the webpage in a new window, however I am wanting this to open in the same window instead, any help? Code: <html> <body><script> function goToNewPage(dropdownlist) { var url = dropdownlist.options(dropdownlist.selectedIndex).value; if (url != "") { window.open(url); } } </script> <p>Test</p> <form name="dropdown"><select accesskey="E" name="list"> <option selected="selected">Please select....</option> <option value="http://www.google.com/">Google</option> <option value="http://www.search.com/">Search.com</option> <option value="http://www.dogpile.com/">Dogpile</option></select> <input onclick="goToNewPage(document.dropdown.list)" type="button" value="Go" /></form> </body></html> Hi this is my first post i dont know were to post it any way hope you can help me out ok the thing is that i got this script <script> alert("mesages"); document.location = "http://google.com"; </script> easy script but when you click button it takes you the the URL but i want it in a new tab plz help and sorry if this was posted in a new section i try google this but not luck Hi guys, i hope u can help me. This is the link(and i have a function called check_group): Code: <a href="javascript:viod(0)" onclick="check_group('<?php echo $codart ?>','<?php echo $codfam ?>')"><?php echo $gname?></a> I have a function called check group. I want to open that link in a new window. Thanks. I'm trying to allow a user to download a file off my server without opening a new page. How would I do that with JavaScript? Thanks! I am using JavaScript for popups in my OpenLayers map. All the html tags like <br> work in the popup window except for the link href tag. Everytime I put in a link in my popup window it doesnt work: Code: var mystring = "here is link:<br> <a href=\"www.sun.com\">link</a>"; popup = New OpenLayers.Popup.FramedCloud("chck", feature.coord, null, mystring, null, true, onPopupClose); Also tried link without quotes and with ticks and nothing seems to work with the link not taking me anywhere. Please advise. Hi i need to have when a mouse over a link it will show a window For a example link will be Custermers when cursor is on the customer link it show the customernames from the database help me to do this plz help me.......................... Hi, I am working with the Cut & Paste JavaScript Slideshow which you can find on http://javascriptkit.com/script/script2/jsslide.shtml . The images are linked to a page on the Internet (click on image1 to go to "page1", click on image2 to go to "page2", etc.) which is a nice feature! However, the link opens in a new window. Could anyone tell me what I have to do to 'force' the link to open in the same window (target="_self")? Thank you for your help! I really appreciate it. WWWolf - Belgium |