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.
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>
This question already has an answer here:
Why aren't these elements with display:inline-block properly aligned?
(1 answer)
Closed 7 years ago.
I've got a series of thumbnail container elements with the css property display:inline-block but when they line up next to each other, the second element has more space at the top than the first (see attached image). Any idea why this happens? Is there a better way to line these elements up next to each other? I know that floating them solves this issue, but it seems like floating isn't the best way to go about this.
Here's my code:
HTML:
<article class="thumb_container">
<div class="thumb_content">
<img src="images/perlin.jpg" alt="Perlin Lines" class="thumb_img"/>
<header class="thumb_header">Perlin Lines</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. Etiam ut.
More...
</p>
</div>
</article>
<article class="thumb_container">
<div class="thumb_content">
<img src="images/branching.gif" alt="Branching" class="thumb_img"/>
<header class="thumb_header">Branching</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi.
More...
</p>
</div>
</article>
CSS:
.thumb_container { display: inline-block; margin-left: 20px; width:220px; background: #fff; -moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); -webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); }
.thumb_container:first-child { margin-left: 0px; }
Just add vertical-align: top where you have display: inline-block.
More info here: Why aren't these elements with display:inline-block properly aligned?
You have to think it this way: Inline blocks are basically inline elements with a bit of enhanced behaviour. So what happens, when you place inline elements next to each other? Here an example:
<p>This is <strong>a</strong> <span>stupid</span> example.</p>
In this sentence a and stupid are separated by a white space. That's what you would expect. In your example one article tag is separated with a white space from the next one. So the simplest solution is to strip the white space between the tags like this:
<article>
...
</article><article>
...
</article>
Another solution is to float the container, but the display:inline-block is rendered rather useless, when you use floats. You can simply strip it.
Sometimes floating is the best answer.
.thumb_container {
display: inline-block;
float: left; <-------
margin: 0 0 0 20px;
width: 220px;
background: #fff;
-moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2);
-webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2);
box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2);
}
.thumb_container:first-child { margin-left: 0px; }
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/
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>
I am using the code below. What I want to do is have a + or - sign on expanded or collapsed view. How can I do that? Here is the code:
<!--//---------------------------------+
// Developed by Roshan Bhattarai |
// http://roshanbh.com.np |
// Fell Free to use this script |
//---------------------------------+-->
<title>Collapsible Message Panels</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").show();
//toggle the componenet with class msg_body
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(100);
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
p {
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 383px;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFCCCC;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>
</head>
<body>
<div align="center">
<p>Click on the each news head to toggle
</p>
</div>
<div class="msg_list">
<p class="msg_head">Header-1 </p>
<div class="msg_body">
orem ipsum dolor sit amet
</div>
<p class="msg_head">Header-2</p>
<div class="msg_body">
consectetuer adipiscing elit orem ipsum dolor sit amet
</div>
</div>
</body>
</html>
Change the markup of the msg_head to something like this-
<p class="msg_head">Header-1 <span>[-]</span></p>
and change the toggle function to look like this-
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(100);
})
.toggle( function() {
$(this).children("span").text("[+]");
}, function() {
$(this).children("span").text("[-]");
});
Easiest way to do this is with the .toggleClass( className ). Using this method you can add or remove a class from an element. So modifying your code to the (untested) code below should do the trick. You'll want to offset the padding by an equivalent amount to fit your graphic files.
JavaScript
$(".msg_head").click(function() {
$(this).next(".msg_body").slideToggle(100);
$(this).toggleClass('msg_head_expanded');
});
CSS
.msg_head
{
padding: 5px 10px;
cursor: pointer;
position: relative;
background:#FFCCCC url('plus.png') no-repeat 0 50;
margin:1px;
}
.msg_head_expanded
{
background:#FFCCCC url('minus.png') no-repeat 0 50;
}
I have this very thing on my own website. Here's how I do it:
$(".question").click(function () {
if ($(this).next(".answer").is(":hidden")) {
$(this).next(".answer").slideDown("slow");
$(this).children('span').text('-');
} else {
$(this).next(".answer").slideUp("slow");
$(this).children('span').text('+');
}
});
The HTML looks like this:
<div class="question">
<span>+</span>blahblah
</div>
<div class="answer">blahblah</div>