I have the following piece of script that used to work with jqModal.js and jquery-1.2.1.min, but when I upgraded to jquery-3.6.0.js and jqModal-1.4.2.js, my window will not pop-up, and when it pops up, the buttons are not responsive and also it is partially in the background and covered by the parent window. Does anyone know why this happening?
$(document).ready(function(){$('#dialog').jqm();});
<ui:image binding="#{footer.imageWarning}" id="imageWarning" style="left: 10px; top: 7px; position: absolute; " url="/resources/warning_large.gif"/>
<ui:image binding="#{footer.imageError}" id="imageError" style="left: 10px; top: 7px; position: absolute;" url="/resources/error_large.gif"/>
<ui:label binding="#{footer.labelMessageTitle}" id="labelMessageTitle" labelLevel="1" style="left: 40px; top: 10px; position: absolute;" text="#{SessionBean1.errorMessageTitle}"/>
<h:outputText binding="#{footer.outputTextMessageSummary}" escape="false" id="outputTextMessageSummary" styleClass="LblLev2Txt" value="#{SessionBean1.errorSummary}"/>
<h:outputText binding="#{footer.outputTextMessage}" escape="false" id="outputTextMessage" value="#{SessionBean1.errorMessage}"/>
${sspMsg.footer_jspf_key_5}
${sspMsg.footer_jspf_key_7}
${sspMsg.footer_jspf_key_9}
<script type="text/javascript">
// for dialog buttons
var footerDialogObjects = new Array();
footerDialogObjects[footerDialogObjects.length] = document.getElementById("buttonModalOK");
footerDialogObjects[footerDialogObjects.length] = document.getElementById("buttonModalNo");
footerDialogObjects[footerDialogObjects.length] = document.getElementById("buttonModalCancel");
</script>
</div>
</div>
Related
i want to animate div box from left to righ and right to left.
suppose i have a 2 box with bootstrap classes`example :
<div class="container">
<div class="row">
<div class="col-md-6 id="leftToRight"></div>
<div class="col-md-6 id="RightToLeft"></div>
</div>
</div>
now i want to animate #leftToRight id from left to right and #RightToLeft from righ to left.
when scroll web page.
I see many website in which this type of animation is applied.
I am very curious to know how it is happen.
You can use the wheel event to answer your question:
$(function() {
$(window).on('wheel', function(e) {
var delta = e.originalEvent.deltaY;
if (delta > 0) //On scroll down
{
$('#RightToLeft').animate({
left: "-=10px"
},5);
$('#LeftToRight').animate({
left: "+=10px"
},5);
}
else //This is added for reverse animation on scroll up
{
$('#RightToLeft').animate({
left: "+=10px"
},5);
$('#LeftToRight').animate({
left: "-=10px"
},5);
}
return false; // this line is only added so the whole page won't scroll in the demo
});
});
#RightToLeft{
position: relative;
margin: auto;
background: red;
width: 100px;
height: 100px;
}
#LeftToRight{
position: relative;
margin: auto;
background: blue;
width: 100px;
height: 100px;
}
.row{
margin: auto;
width:90%;
overflow: hidden;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6" id="LeftToRight">Left to Right</div>
<div class="col-md-6" id="RightToLeft">Right to Left</div>
</div>
</div>
Im creating a radial play button for my player And I use css flex for centering the play icon. Its working fine in chrome but not in safari browser.
In my css I have something like this:
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: 20px;
margin-top: 20px;
background-color: #circle-background;
border-radius: 50%;
border: 3px solid #192D48;
font-size: 50px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
i {
-webkit-align-self: center;
align-self: center;
color: black !important;
top: 0px;
left: 1px;
}
}
I already added display: -webkit-flex; to support flex in safari but unluckily it doesnt work and when I checked it in the debugger styles of safari there is no display: -webkit-flex; on it but space -webkit-justify-around appear.
but when I hardcoded it in style like this:
<div class='scr-button radial-progress'>
<div class="circle-gray"></div>
<div class="circle">
<div class="circle-white"></div>
<div class="mask full" ng-style="{'transform': currTime}">
<div class="fill" ng-style="{'transform': currTime}"></div>
</div>
<div class="mask half">
<div class="fill" ng-style="{'transform': currTime}"></div>
<div class="fill fix" ng-style="{'transform': currTime * 2}" ></div>
</div>
</div>
<div class="inset" ng-click="play()" style="display: -webkit-flex;">
<i ng-class="icon()"></i>
</div>
</div>
Its working fine, can someone explain me why it doesnt work when I put it on a class? Is it browser issue? Or Im doing it wrong?
Specs:
Less,
Safari Version: Version 8.0.8,
Angularjs
I am trying to align a set of "buttons" made out of DIV elements that are arranged along the bottom of a web page using the CSS display: inline-block. I've attached a fiddle which illustrates the issue.
The problem is that this current code works on all modern browsers except Safari (7, 8). I don't know if this is a bug in WebKit that Safari uses, or something that I've allowed to happen by not using the right incantations.
The thing that triggers the unwanted behavior is the nested DIV.btn-sub; however, removing that text is not an option to "fix" the issue.
Here's the expected behavior (snap taken from Firefox 34, similar behavior on IE 9, 10, and latest Chrome):
Here's what happens on Safari:
Any help here would be appreciated!
It's usually best practice to use a list when creating inline-blocked elements in a row/list, such as a navigation.
The issue here seems to be the block being set with a padding directly; relative it's parent. Which somehow is turning it into a margin or something similar.
You can try stripping CSS until you get a full height out of the blocks, and then add another inner div which you can call .btn-padding which contains your top padding.
Here is similar.
body, html {
height: 100%;
margin: 0;
background: green;
}
#wrap {
display: block;
width: 100%;
position: fixed;
bottom: 0px;
height: 50px;
border:0;
background-color: blue;
color: #fff;
}
#btnls {
display: block;
list-style-type: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#btnls li {
display: inline-block;
margin-right: 10px;
background-color: purple;
min-width: 158px;
max-width: 300px;
height: 50px;
text-align: center;
vertical-align: middle;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#btnls li .btn-padding {
display: block;
padding-top: 10px;
width: 100%;
height: 50px;
}
#btnls li .btn-padding .sub-btn {
display: block;
font-size: x-small;
margin: 0;
padding: 0
}
<div id="wrap">
<ul id="btnls">
<li>
<div class="btn-padding">Foo
<div class="sub-btn">Bar</div>
</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
</ul>
</div>
Maybe I'm missing something obvious here, but so far I've found nothing that makes any sense with this. I have a scrollable div with a canvas inside of it. In FF and IE all works as expected: Using drag scrolling with the mouse, the div scrolls normally. In WebKit, however, things are flipped. If I scroll up, the content moves down, if I scroll down, it moves up. If I scroll with my mousewheel, everything moves in the right direction. It's only using mousedown on the scroll bar that's screwed up. NOTE: I am using a 3rd party library to generate the contents of the canvas, which is where all the inline styles are coming from.
My code is as follows:
#Palette {
height: 420px;
overflow: auto;
}
<div id="Palette" style="position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: move;">
<canvas width="268" height="420" tabindex="0" style="position: absolute; top: 0px; left: 0px; z-index: 2; -webkit-user-select: none; cursor: move;">
This text is displayed if your browser does not support the Canvas HTML element.</canvas>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 1px;"></div>
</div>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 700px;"></div>
</div>
</div>
This is apparently an issue with WebKit 36. It is solved in 37.
My sticky footer with my fontawesome icons is displaying perfectly in all browsers, but in Safari, the links aren't working.
Here is my code:
<style>
h4 {
font-size: 1em;
color: #A0A0A0;
bottom: 15px;
position: relative;
letter-spacing: 10px;
}
.footer{
position: fixed;
left:0px;
width: 100%;
bottom: 0px;
height: 20px;
background: #404040;
padding-bottom: 25px;
opacity:0.95;
}
</style>
......
<div class="footer">
<h4>
<a href="https://twitter.com/">
<i class="icon-twitter icon-2x"></i> </a>
<a href="https://www.facebook.com/">
<i class="icon-facebook icon-2x"></i></a>
<a href="http://wordpress.com/">
<i class="icon-rss icon-2x"></i></a>
</h4>
</div>
Can anyone tell me why this doesn't work in safari? And how to fix it?
I just into this problem. I believe this is caused by safari giving the target no dimensions (i.e. 0px x 0px). If you force inline-block on the <i> element it should to work correctly.
Had the same problem.
I added to the icon's class
display:inline-block;
and it worked fine!