I am using jQuery UI to provide a modal window when a page loads. This works fine, however, the background layout is messed up compared to the way it should be.
Here is the dialog code:
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
Here is the jQuery:
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: true,
width: 300,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
Here is what the page should look like: http://www.rutlandinc.com/
This is how it looks with jquery dialog in place: http://www.rutlandinc.com/index2.html
Is it possible to have the cake and eat it too?
Thanks.
probably need to use the ready function. You need to load that when the document is ready.
$(document).ready(function () {
http://api.jquery.com/ready/
your site is loading very slow for me, so i can't even look at the source code. But give that a shot.
Must be something else because this does work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link type="text/css" href="jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function (){
// Dialog
$('#dialog').dialog({
autoOpen: true,
width: 300,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
<style type="text/css">
<!--
.style2 {
font-size: 12px
}
-->
</style>
</head>
<body class="home">
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Ok so its a CSS issue. jquery ui uses some generic css rules. Like state-hover, widget-ui etc... You have them defined in the jquery css file and the base.css file. You'll need to take out what you don't need.
The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below.
Sample markup with jQuery UI CSS Framework classes
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
<p>Dialog content goes here.</p>
</div>
</div>
Related
I'm trying to make a web page that starts with a image next to some text. I got that to work but when I try to put content under that it works on desktop but when the columns get stacked the content below covers the second column. I don't do a heap of web design so this might be a easy fix.
Here are some images:
These images are scrolled down the image fill the whole viewport.
Working on desktop
Not working when stacked
Here is my code:
index.html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/style.css" rel="stylesheet">
<title>Name</title>
</head>
<body>
<div class="container-fluid">
<div class="row vh-100">
<div id="welcomeImg" class="col-lg-4 h-100 welcomeImg" style="background-image: url('https://via.placeholder.com/1080x1920?text=Image');">
<div class="h-100" id="mobileOverlay">
<div class='icon-scroll'></div>
</div>
</div>
<div class="col-lg-8">
<h3>text</h3>
</div>
</div>
<div>
<h1>Content</h1>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien faucibus et. Malesuada pellentesque elit eget gravida cum sociis. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Consequat semper viverra nam libero.</h5>
</div>
</div>
<!--Scripts-->
<!-- BootStrap -->
<script src="vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Others -->
<script src="resources\js\reactive.js"></script><!--This is just a script that hides the mobileOverlay div if the display is over a certain size. The issue still happends with this removed-->
</body>
</html>
style.css
body, html {
height: 100%;
}
.welcomeImg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* A scroll animation by Khalil Benihoud on code pen https://codepen.io/khalilbenihoud/pen/wBJVLK */
.icon-scroll,
.icon-scroll:before {
position: absolute;
left: 50%;
}
.icon-scroll {
width: 40px;
height: 70px;
margin-left: -20px;
top: 80%;
margin-top: -35px;
box-shadow: inset 0 0 0 1px #fff;
border-radius: 25px;
}
.icon-scroll:before {
content: '';
width: 8px;
height: 8px;
background: #fff;
margin-left: -4px;
top: 8px;
border-radius: 4px;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(46px);
}
}
#keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(46px);
}
}
Just take away the vh-100 class from the row and give it to the div with the id welcomeImg instead of the h-100 class. This should do the trick.
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeImg" class="col-lg-4 vh-100 welcomeImg" style="background-image: url('https://via.placeholder.com/1080x1920?text=Image');">
<div class="h-100" id="mobileOverlay">
<div class='icon-scroll'></div>
</div>
</div>
<div class="col-lg-8">
<h3>text</h3>
</div>
</div>
<div>
<h1>Content</h1>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien faucibus et. Malesuada pellentesque elit eget gravida cum sociis. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Consequat semper viverra nam libero.</h5>
</div>
</div>
</body>
I am working on an ASP.NET MVC 5 project and using Rotativa to generate PDF documents from Razor views.
I can't seem to get Rotativa to render the the view properly using Bootstrap styling. I'm trying to style the view using the simple grid layout that Bootstrap does so well. Nothing too fancy.
Here is a screenshot of my Razor View:
Here is a screen shot of the PDF:
And here is my view's content:
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Has any one else been able to get this working?
I had a same issue.
Try to use col-xs-# instead col-md-# / col-sm-#, that works for me perfectly.
You should set correct page size and take care of resolution and Bootstrap breakpoints when shrinking browser window.
From the screenshot I can see the you get mobile output when converted to PDF; that means Bootstrap has detected small page size and it adjusts style accordingly. Default Rotativa page size is A4, I think.
I have found a workaround here.
After html
<div class="row printDetails">
<div class="col-5" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-6" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
you should make a css class to display inline block. So in your case:
.printDetails > div {
display: inline-block;
}
Also notice the row amount is 5 and 6 or 5 and 5 depending on the page size, some of the width goes for pdf size margin which is weird why it doesn't get the exact size as mobile version which is taking Rotativa.
Hope it helps someone.
Update
As #Erdogan replied, and after checking his link I tested the code that he probably thought I have to check.. I'm referencing here the code:
just added a CSS class at the same level as uk-grid called "flexrow" and another one for my divs.
.flexrow {
display: -webkit-box;
display: -webkit-flex;
display: flex !important;
}
.flexrow > div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
Got this: Here in some of the comments
For bootstrap 3, Do the following:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
another tags ...
</div>
For bootstrap 4, Do the following:
<div class="col-6 col-sm-6 col-md-6 col-lg-6">
another tags ...
</div>
For bootstrap4 add the following styles
.flexrow {
display: -webkit-box;
display: -webkit-flex;
display: flex !important;
}
.flexrow > div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
Then add flexrow beside each row class in the HTML
<div class="row flexrow"> </div>
Thanks to link
I'm using the jQueryUI demo example and I'm trying to add in the open on mouseover effect and to have all li's closed at start. but for some reason it's only doing the default 1 collapsed and click to collapse
http://jqueryui.com/demos/accordion/#mouseover
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ event: "mouseover" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</body>
</html>
You have two calls to initialize the accordion:
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ event: "mouseover" });
This is why the mouseover effect is not working. To combine the options into one initialization call:
$("#accordion").accordion({ header: "h3", event: "mouseover" });
Additionally, if you want all of the sections collapsed initially, add the active option and set it to false:
$("#accordion").accordion({
header: "h3",
event: "mouseover",
active: false
});
Here's a working example: http://jsfiddle.net/HjK5T/
When I resize the first div it causes the next div to jump 'up' the column.
To recreate: top div drag the resize handle.
jQuery
$(function() {
$('.portlet').draggable({ grid: [25, 25] }).resizable({ grid: [25, 25] });
});
Layout
<div class="portlet" id="P2">
<div class="portlet-header"><h3>News</h3></div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="Div1">
<div class="portlet-header"><h3>Feeds</h3></div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
CSS
.portlet
{
min-width: 100px;
min-height: 100px;
width: 100px;
height: 100px;
background-color: #C0C0C0;
}
Give #Div1 an absolute positioning of top:100px and it should stay put when resizing #P2. On initial resize of #Div1 it's inline positioning becomes changed and the browser bumps up #Div1 as you describe.
i'm trying to use the animation 'bounceslide' but I'm not seeing any bounce! Any ideas - I'm pretty new to jQuery.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Accordion</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/effects.core.js"></script>
<script type="text/javascript" src="js/ui.accordion.js"></script>
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
collapsible: true,
active:false,
animated: 'bounceslide'
});
});
</script>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
}
.demo {
width:750px;
margin: 0 auto;
}
h3+div{
background: rgba(0,0,0,.2);
padding:4px;
}
h3 {
background:#4495D1 url(alert-overlay.png) 0% 0% repeat-x;
cursor: pointer;
outline: none;
padding: 10px;
}
h3:hover {
background-color: #555;
}
h3 a {
color: white;
text-decoration: none;
}
</style>
</head>
<div class="demo">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
</div><!-- End demo -->
It works when you select a container above the container that is expanded. I assume this is the standard behaviour.
I know this is an old question that you've probably long since figured out, but I was running into nearly this exact problem today, so I created a working example here. I removed some of your styling for width and other minor changes, but changed very little to your original work so I suspect you were running on IE which does not show animations at all. At least now if someone else comes across this question they can find a working example.