i am working on an mvc page that allows users to securely logon via a colorbox modal window. the modal is layed out something like this:
<html>
<body>
<div id="overlay" style="display: block;" class="overlay"> <div>
<div id="colorbox" style="display: block;">
<iframe id="logonIFRAME">
logon form is in this ssl iframe
</iframe>
</div>
<div id="restofpage"> </div>
</body>
</html>
thats the basic layout.
what happens is when the iframe form is authenticated, it calls parent.$.fn.colorbox.close() which closes the modal and reloads the parent page.
now the problem is the colorbox.close script is in the parent page (not the iframe) so it cannot be called from the iframe due to the protocols being different (https and http).
so how can i either call the script cross protocol (which i believe you cant do) or from the iframe set the colorbox div's display attribute to none and hiding the overlay. this would hide the modal just as well but can the code in the iframe talk to the parent pages html? if it could i would use something like:
$('#colorbox').attr('style', 'display: none;');
but that jquery doesnt work.
anyone got any ideas on how best to proceed?
It's kind of Hack i think of... On success login redirect to normal page mean having http, and in that you write your code to call parent windows by simpally adding javascript.
I found this is working for me, hope it works for you too. however it's not pure solution but just a workaround
Imran
Related
I'm trying desperately to make the link on a linked image work but whenever I click on the link, my browsers (Chrome & Firefox) just tell me they are connecting to the page and I get a continuous spinning image as if the browser were doing something. The link works perfectly if I open in another tab.
The div in question is coded and styled in a Wordpress page. I am making changes to another developer's work for a customer.
Here's the div:
<div style="position: absolute; top: 645px; left: 80px; width: 150px;">
<a href="http://themoneycouple.com/?p=4681" target="_top" style="display:inline-block">
<img src="http://themoneycouple.com/wp-content/uploads/2013/10/kit-history.png" alt="Toolkit History Link" width="150" height="170" style="position:relative; display:block; z-index:999999999999;" />
</a>
</div>
And here's the page it's on: http://themoneycouple.com/resources/love-and-money-kit/
I've tried changing the z-index on every element in multiple ways, tried changing the link target in every way possible, changed display settings, etc.
One last note, there are lots of iframes on this page and I'm not sure if those are messing things up somehow. Massive thanks for any help.
It looks like the URL for that HREF is trying to load a page as a modal using the fancybox protocol. Is this what is expected?
Does that page ID exist? It looks URL looks different from the other page URLs on the site.
There is a jQuery function that targets every IMG tag w/ an A tag and applies a class of "fancybox". Modify the specificity of this function to exclude the last item in the gallery. Better yet, create a new class and add it to the elements that should have the fancybox functionality. The same issue happens on other pages where the HREF goes to a page instead of opening an image.
Current jQuery function:
var thumbnails = jQuery("a:has(img)").not(".nolightbox").filter( function() { return /\.(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) });
thumbnails.addClass("fancybox").attr("rel","fancybox").getTitle();
I think I found the link you mean and it has a fancybox class on it, so I presume it is trying to open a fancybox javascript plugin popout for your link.. which is a redirect and failing to do so, since I can right click the link and go to open in new tab and it works.
I have a page with error message hidden using display: none;
When page loads, the error message was shown briefly and then went away. It seems ccs applies slowly to the page.
How can I improve the user experience and not allow the error message to display when loading?
The page also loads a table using Ajax call. Could this affect how css applies to the page?
Thanks.
Simply add style="display:none;" to the actual html elements or div's on the page that you don't want to show initially. You can't rely on the CSS file right away. For example:
<div class="error" style="display:none;">
<span class="myerror">Hello World!</span>
</div>
Other than this exception for the hidden areas, it's typically best to keep all your css decoupled from the page and in an external file.
If you call your CSS file with <link> then you should try to put your CSS in <style> instead. Should be faster. As the external file needs longer to load then <style> which you have in the same file.
I am at an absolute loss in this situation. I've tried changing the src value of an iframe with pure JS and jQuery, but both attempts just close the iframe object!
I have an iframe in the HTML as defined:
<body>
<div id="divBody">
<img src="images/test.gif" onClick="...see_below..." />
<iframe name="ifTarget" id="ifTarget" src="http://www.yahoo.com" allowtransparency="true" scrolling="auto"></iframe>
</div>
</body>
I also have an img on the page that, when clicked, should change the src of that iframe as defined:
document.getElementById('ifTarget').setAttribute('src', 'http://www.google.com');
and alternatively via jQuery:
$('#ifTarget').attr('src','http://www.google.com');
In both cases, the iframe just closes down an I'm left with the following error via FF Error Console:
Security Error: Content at https://www.google.com/ may not load data from http://127.0.0.1/.
I am running this from the local computer, but I get this same message if run from a hosting company (with the trialing URI adjusted accordingly). Any thoughts?
Thanks,
Dave
I need to have the links within my Content Editor Web Part open in the parent frame. The links are a part of the page the iframe is loading. I am editing the Home Page of the SharePoint site and cannot add a tag to the page. Here is my code:
<div style="overflow:hidden; width: 800; height:200; position:absolute; left:-170px; top:0px;">
<iframe src="/News/Pages/Default.aspx#OuterZoneTable" style="overflow:hidden; width:100%; height:550;" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">
</iframe></div>
The widths and heights are different because I am offsetting the page to show a particular location in the page.
Unless I'm missing something about your requirements, wouldn't a TARGET attribute set to _top (or _parent) on your anchors be sufficient?
You'd need to edit the HTML source to accomplish this, so maybe you're asking if there's a way to set that behavior using the Content Editor WYSIWYG controls -- which I don't believe there is.
Another idea would be to use scripting to set the attribute values via the DOM. For example, if you had jQuery in play on your page of links, you could do something like:
$("#OuterZoneTable>a").attr("target","_top");
That example assumes the links you want to change are contained in an element with the HTML id of "OuterZoneTable".
I have a DIV tag. Inside the DIV, I have a Table and in a row, I have placed a script code which displays random images which on a click leads to a url.
This is how the script renders inside the Div Tag
<div>
<table>
<tr>
<td>
<script />
<a href="some random url">
<img></img>
</a>
...
When the user hovers over these images, the anchor url shows as a message on browser status bar. This is very misleading for users. I want to know how to use CSS to hide this status message - Cross Browser and display a custom message instead. On the Div, I have given onmouseout and onmouseover, however it does not help.
Can this be done?
See https://developer.mozilla.org/en/DOM/window.status :
This property does not work in default configuration of Firefox and some other browsers: setting window.status has no effect on the text displayed in the status bar. To allow scripts change the the status bar text, the user must set the dom.disable_window_status_change preference to false in the about:config screen.
This is a security feature that you can't realistically bypass.
common users dont know that they should look at that place in the browser window.
but you can hide that message... you can maybe just redirect with javascript
something like this:
<a href="javascript:void(0);" onclick="someredirectfunction('someurl');return false;" >
<img />
</a>
onmouseout and onmouse over are used for events for client side scripting. Those are used "mostly" for a language called ecmascript(javascript). You unfortunately will not be able to do what you are asking with CSS, css is desinged to represent the appearance of a site, HTML the form, and javascript (other scripting sources) the function.