Recently, I've been trying to work with Prototype & Scriptaculous to have a rather simple SlideDown & ScrollTo effects to fill out a form for their application. It works fine in FF3, FF4, Chrome, Safari, Opera, IE9, and IE8. I knew IE6 would be an issue, but I thought I could get IE7 to work with a couple slight modifications.
The fix of setting the width of the div did not fix the issue.
Currently, it is not working in IE7 and I'm at a loss for why. I'm not a ninja at JavaScript and would appreciate any help given.
XHTML Structure:
<div id="scrollPoint"></div>
<div id="slideForm" style="display:none;">
<div style="position: relative">
<div class="separator" style="padding:5px 0"></div>
<h3 class="fhgroupblue">Apply for this Position:</h3>
<ucl:ApplicationForm id="WebUserForm" runat="server" />
</div>
</div>
Javascript:
<script type="text/javascript">
function hideDetails() {
if ($('showFormLink').style.visibility != "hidden") {
$('showFormLink').style.visibility = 'hidden'; Effect.SlideDown($('slideForm'));
}
Effect.ScrollTo('scrollPoint'); return false;
}
</script>
Trigger:
<div style="text-align:center;">
<a id="showFormLink" onclick="hideDetails();">Apply!</a>
</div>
CSS:
#jobDetails #slideForm {
padding-right: 10px;
width: 400px;}
Figured this out -- Posting solution for possible other troubled users.
For those that are using SiteCore, don't forget to add:if(!Prototype) to the top of your included Prototype.js file.
This is due to SiteCore rolling in it's own Prototype library with the Web Forms for Marketers.
Here's what we did:
Added if(!Prototype) to the top of
our included Prototype.js file
In /sitecore/shell/controls/lib/{/prototype, /Scriptaculous}, updated the JavaScript libraries to their newest versions.
Magic happened and everything is back to working in IE6 & 7 the way that it was supposed to.
Related
How can I unable website preview feature on all of the links in my web page? That is when the user moves the mouse over any link in the page, I want to show a simple pop up window which loads the page in link. I tried doing it on my own with help of Google and stackoverflow. But result got something like this -
(ACTUAL PAGE LINK RENDERING)
How should I fix this? I wanted to have it similar to Google instant preview.
Here is my code - (website links are fetched from web service)
html file
<div class="text-result" *ngIf="Display('all')">
<div *ngFor="let item of items$|async" class="result">
<div class="frame">
<script>
$(".head-link").mouseover(function() {
$(this).children(".tooltip").show();
}).mouseout(function () {
$(this).children(".tooltip").hide();
});
</script>
<div class="title">
<a href="{{item.link}}" class="head-link">{{item.title}}
<iframe id="tooltip" src="{{item.link}}"></iframe>
</a>
</div>
</div>
<div class="link">
<p>{{item.link}}</p>
</div>
<div>
{{item.pubDate|date:'fullDate'}}
</div>
</div>
</div>
css file
.head-link {
color: #069;
cursor: pointer;
}
.tooltip {
display: none;
position: absolute;
border: 1px solid #000;
width: 400px;
height: 400px;
}
I setup a minimal JS fiddle for you, and I believe I resolve the issue.
A summary of my changes is:
Your iframe has an id=tooltip, when you are referencing it as .tooltip, so I changed it to class=tooltip.
Your jQuery script has to appear after the elements on the page that are used by it, so I moved the script tags to the bottom of the class=text-results div.
Two notes:
First, this isn't an Angular 2 problem, you are using Angular 2 in your project, but the problem is with your jQuery code.
Second, you really should avoid using jQuery to solve your problems within an Angular 2 project. Angular 2 has the capability to solve this problem without needing to include jQuery. Mixing jQuery and Angular 2 will result in messy and hard to understand code, you are much better off trying to solve this problem using only Angular 2.
I am building an application for a multi-touchscreen and wanted to use the angular material datepicker.
Even though it works fine when using it with a normal mouse, when I tried using it on my touchscreen, the datepicker is not scrollable. I do not really know what I am doing wrong, as the examples on the angular material page are working.
So this is the code: (I kind of tried it everywhere on my page, so it does not really matter what is around this code as it did not work anywhere else as well):
<div style="margin-top: 10px">
<h5>Daterange:</h5>
<md-datepicker style="padding-right: 0px; margin-right: 18px" md-placeholder="From" ng-model="searchStartDate" md-max-date="searchEndDate" ng-change="clearShipSearch(); shipSearch()"></md-datepicker>
-
<md-datepicker md-placeholder="To" ng-model="searchEndDate" md-min-date="searchStartDate" ng-change="clearShipSearch(); shipSearch()"></md-datepicker>
</div>
Why doesn't this inline javascript work in Firefox? And how can I get it to work correctly in Firefox?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {display:inline; padding:0px 7px 0px;}
h2 a {text-decoration:none}
h2 a:link {color:#FFFFFF;}
h2#s0 {background-color:black;}
</style>
</head>
<body>
<h2 id="s0"><a href="javascript:document.getElementById('d0').style.display='block';">
Click me!</a></h2>
<div id="d0"
style="width:98%;border: 5px solid #000000;padding:3px; display:none;">
When you click the heading, this text should appear with a black
outline, with no gap between that and the heading background.</div>
</body>
</html>
In Safari this appears as it should.
In Firefox it momentarily appears with a gap (as if the browser's in
quirks mode) then everything on the page vanishes, replaced by the word "block". At first I thought that meant Firefox was blocking it, but it says "inline" instead if that's what I set the style to display.
EDIT: The Javascript part of my problem is now solved. But there's still a difference in the way the heading background appears: it extends down to the div border in Safari, but not in Firefox. Is there a way to make it do so in Firefox?
The closest working form of what you have is:
<a href="javascript:void(document.getElementById('d0').style.display='block');">
Because:
When a browser follows a javascript: URI, it evaluates the code in the
URI and then replaces the contents of the page with the returned
value, unless the returned value is undefined. The void operator can
be used to return undefined.
onclick is the better option here.
On OSX firefox version 41.0.1 I also experienced the same issue in fiddle. I do not know why it does not work, it could be a bug in FireFox but you can do this to have a somewhat similar working solution:
<a href="#" onclick="document.getElementById('d0').style.display='block';">
Replace your link with this:
<a href="javaScript: void(0);" onclick="javascript:document.getElementById('d0').style.display='block';">
As far as i understand it, Firefox tries to open a URL if you put the javaScript call into the href attribute. (as you can see in your location bar)
Putting it in the onclick instead makes it work fine.
I guess you could also use some preventDefault or such, and you could also try a href="#", but the a href="javaScript: void(0);" works just fine and is robust through all browsers i have tested so far.
I want to edit an absolute positioned DIV which is located within a contenteditable DIV. This works great with IE, Chrome, Safari and Opera, but unfortunately not in Firefox.
This is the code:
<DIV contenteditable="true"
style="border:1px solid #F00; width:220px; height:220px;">
<DIV>
<P>DIV 1, editable</P>
</DIV>
<DIV style="position:absolute; left: 20px; top: 50px;">
<P>DIV 2, not editable in FF !?</P>
</DIV>
</DIV>
I already did a unsuccessful try in http://jsfiddle.net/Jf54f/4/
Is this a bug? Does someone have a workaround? Thank's in advance :-)
Set position:relative on the editable element, so that the positioned div is considered to be inside it.. (most likely a bug in the implementation)
Demo at http://jsfiddle.net/Jf54f/8/
removing contenteditable="true" from the main div and adding it to the two inner divs worked fine.
check it here: http://jsfiddle.net/RASG/Jf54f/10/
Well you should not set contenteditable="true" try just contenteditable. The term just without any value, you can add values like "plain -text-only" for chrome and IE because they allow formatting with ctrl+b and all.
<DIV contenteditable id="">
Though as my friend here said, it works in all browsers. I tried too, it does.
At the top of this page: http://andrew-muir.com/search/2/#1 - When you click on the slider it will load new results using AJAX into a div. When i chose certain prices on the slider the results look fine in IE and when i chose other prices the results come back all broken.
Any ideas? Thanks!
There's a lot of invalid markup in the HTML fragment that comes back from the slider actions. You've got some unclosed tags, etc.
Example:
<div style="background-color:#252525; padding:5px 10px; height:130px; position:relative;">
<p class="bold" style="color:#8a96a4; margin-bottom:0.5em;">Blue Lucerne lotus jug</p>
<p class="bold" style="color:#FFF; margin-bottom:0.5em;">£4250</p>
<p style="margin-bottom:0.5em;"><p><strong>Superb and very rare 30cm lotus jug in the bl…</p>
<p class="boldred" style="position:absolute; bottom:0px; left:10px;">View details ></p>
</div>
That line with the "Superb and rare" text has an unclosed <strong> tag.
When I try to look at the broken page in the IE 8 developer tool, it won't show me the content of the main <div>. That's a sure sign that the browser has just thrown up its hands in frustration.
edit — weird; it just started working ...