I have made a simple lay-out for a div I want on my website. The div handles the news about the page.
The div looks like this: http://jsfiddle.net/6baouaLt/
The thing is that I want to have multiple news content in the same div, for example every 5 seconds the current new will scroll down and vanish with lets say overflow: hidden and then another new appears from the top of the div scrolled down.
EDIT: I have made a basic picture of how it should be done:
I hope you understand what I mean, Otherwise I can explain further more.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>News div</title>
<style type="text/css">
div.newswrap
{
width: 522px;
box-shadow: 0 10px 5px #c9c9c9;
}
div.newstitle
{
background-color: #54B3F4;
display: inline-block;
margin-right: -4px;
border-right: 1px solid black;
padding: 5px 10px;
}
div.newscontent
{
display: inline-block;
background-color: #f49554;
padding: 5px 10px;
}
.newstitle > span
{
font-family: sans-serif;
font-weight: 600;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div class="newswrap">
<div class="newstitle">
<span>NEWS</span>
</div>
<div class="newscontent">
<span class="newsspan">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati</span>
</div>
</div>
</body>
</html>
Related
I want to display an image if a pane of my accordion is open.
When one of the three shutters of the accordion opens, I want to show an image.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer" name"accordeon">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>
<img id="myImgaa" src="" width="107" height="98">
<script>
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function () {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
function myFunction() {
const accordeon = document.querySelector('[name="accordeon"]');
if ( $(this).next(".answer").is(":visible"))
{
document.getElementById("myImgaa").src = "https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg";
} else {
document.getElementById("myImgaa").src = "";
}
}
</script>
A couple of issues with your current code.
There's an error in your HTML markup - name"accordeon" should be name="accordeon". That's one of the reasons your code is not working.
The second issue is that you're not calling myFunction anywhere, you're just defining it.
And there's no real need to have a separate function like that (that I can see from your current code). A better thing to do would be to dismantle it, and use its parts in your click event handler, but the logic would be counterintuitive.
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function () {
if ($(this).next(".answer").is(":visible")) {
$("#myImgaa").attr("src","");
$(this).next(".answer").slideUp(300);
} else {
$("#myImgaa").attr("src","https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg");
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer" name="accordeon">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>
<img id="myImgaa" src="" width="107" height="98">
As you can see, I've placed the img source clearing in the if is visible part of your check, and the image showing in the else part of it (that's the counterintuitive part).
An additional change to your original code involves making everything use jQuery - while you can mix vanilla JS and jQuery, stick to using one of them.
As an aside - consider hiding the image instead of removing its source (unless there's a really good reason for removing it).
I don't think you can use this here:
function myFunction() {
const accordeon = document.querySelector('[name="accordeon"]');
if ( $(this).next(".answer").is(":visible")){
document.getElementById("myImgaa").src = "https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg";
} else {
document.getElementById("myImgaa").src = "";
}
}
Not sure when your function is called but try:
function myFunction() {
const accordeon = document.querySelector('[name="accordeon"]');
if ( $("#faq_slide .question").next(".answer").is(":visible")){
document.getElementById("myImgaa").src = "https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg";
} else {
document.getElementById("myImgaa").src = "";
}
}
so im doing a Rock, Paper, Scissors game so i can play with javaScript and Jquery but im having trouble with the css.
Where i added the paragraph i want to add an image, depending on what the user chooses in the select box. I added a paragraph just to test it, im gonna add the image once i get my css fixed lol.
I want the 1st grid to look exactly like the 3th grid, which doesnt have anything above it yet.
Oh and also i have another question, this is my first time using Jquery, but i tried doing an alert and its not working, am i doing it right?
My code:
$( document ).ready(function() {
console.log( "ready!" );
});
body{
background-image: url(fondo.jpg);
background-color: #F7B05B;
}
#titulo{
background-color:#FCDE9C;
font-family: 'Gloria Hallelujah', cursive;
text-align:center;
font-size: 25px;
text-shadow: 2px 2px #ff0000;
margin-left:80px;
margin-right:80px;
}
.grid-container {
display: grid;
grid-column-gap:10px;
grid-template-columns: 450px 360px 450px; /* 3 columnas */
grid-template-rows: 450px; /* una sola fila */
margin:30px;
}
#usuario{
grid-column-start: 1; /* es lo mismo que grid-column: 2/3; */
grid-column-end: 1;
}
#computadora{
grid-column-start: 3;
grid-column-end: 3;
}
#resultado{
border-color: #C7EF00;
border-style: solid;
background-color: #F3DFA2;
}
.texto{ /* This is what i want inside my grid but it keeps going lower when i add something*/
text-align: center;
margin-top: 250px;
position:relative;
font-family: 'Indie Flower', cursive;
font-size:25px;
}
.estilo{
border-color: #F7CE5B;
border-style: solid;
border-width: 10px;
background-color: #FE5F55;
border-radius: 5px;
}
.botones{
padding:20px;
font-size:25px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #2D3142;
border:none;
color: #FCDEBE;
}
#nuevoIntento{
padding: 20px;
font-size:15px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #561D25;
border-color: #ECDD7B;
color: #FCDEBE;
width:250px;
border-style: outset;
border-width: 7px;
margin-top:25px;
}
#imageHolder{
/* This is the place where i want to insert an image, in this case i added a paragraph to test my css */
}
<!DOCTYPE html>
<html>
<head>
<script src="javascript1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Indie+Flower&display=swap" rel="stylesheet">
<title>Piedra, Papel o Tijera</title>
</head>
<body>
<header id="titulo">
<h1>PIEDRA, PAPEL O TIJERA!</h1>
</header>
<div class="grid-container">
<div id="usuario" class="estilo">
<div id="imageHolder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam cumque, aspernatur explicabo? Hic, officiis ad minima, tenetur atque alias beatae cum optio libero amet, commodi, quaerat iste consequuntur sint placeat!</p>
</div>
<br>
<div class="texto">
<h3>Seleccione una opción:</h3>
<select id="seleccion" class="botones">
<option value="Piedra">PIEDRA</option>
<option value="Papel">PAPEL</option>
<option value="Tijera">TIJERA</option>
</select>
</div>
</div>
<div id="resultado">
<div class="texto">
<p>Aca va mi resultado</p>
<button id="nuevoIntento" onClick="window.location.reload();">Volver a intentar!</button>
</div>
</div>
<div id="computadora" class="estilo">
<div class="texto">
<h3>Haga click y espere resultado:</h3>
<button class="botones"> Click me!</button>
</div>
</div>
</div>
</body>
</html>
You are almost doing the alert right. Ironically creating an alert is actually by using the word alert. This is Vanilla (non-jQuery or other library) JavaScript and is supported by every browser.
$( document ).ready(function() {
alert( "ready!" );
});
Keep up the good work!
Your content is just overflowing out of the bottom of your container. your margin-top on .texto is set to 250px, which is too high. Just set that to a lower number and it will display correctly. If instead you want the entire box to stretch to fit it's content, you'll need to remove the line grid-template-rows: 450px;, as it is defining how tall a row can be.
body{
background-image: url(fondo.jpg);
background-color: #F7B05B;
}
#titulo{
background-color:#FCDE9C;
font-family: 'Gloria Hallelujah', cursive;
text-align:center;
font-size: 25px;
text-shadow: 2px 2px #ff0000;
margin-left:80px;
margin-right:80px;
}
.grid-container {
display: grid;
grid-column-gap:10px;
grid-template-columns: 450px 360px 450px; /* 3 columnas */
margin:30px;
}
#usuario{
grid-column-start: 1; /* es lo mismo que grid-column: 2/3; */
grid-column-end: 1;
}
#computadora{
grid-column-start: 3;
grid-column-end: 3;
}
#resultado{
border-color: #C7EF00;
border-style: solid;
background-color: #F3DFA2;
}
.texto{ /* This is what i want inside my grid but it keeps going lower when i add something*/
text-align: center;
margin-top: 250px;
position:relative;
font-family: 'Indie Flower', cursive;
font-size:25px;
}
.estilo{
border-color: #F7CE5B;
border-style: solid;
border-width: 10px;
background-color: #FE5F55;
border-radius: 5px;
}
.botones{
padding:20px;
font-size:25px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #2D3142;
border:none;
color: #FCDEBE;
}
#nuevoIntento{
padding: 20px;
font-size:15px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #561D25;
border-color: #ECDD7B;
color: #FCDEBE;
width:250px;
border-style: outset;
border-width: 7px;
margin-top:25px;
}
#imageHolder{
/* This is the place where i want to insert an image, in this case i added a paragraph to test my css */
}
<!DOCTYPE html>
<html>
<head>
<script src="javascript1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Indie+Flower&display=swap" rel="stylesheet">
<title>Piedra, Papel o Tijera</title>
</head>
<body>
<header id="titulo">
<h1>PIEDRA, PAPEL O TIJERA!</h1>
</header>
<div class="grid-container">
<div id="usuario" class="estilo">
<div id="imageHolder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam cumque, aspernatur explicabo? Hic, officiis ad minima, tenetur atque alias beatae cum optio libero amet, commodi, quaerat iste consequuntur sint placeat!</p>
</div>
<br>
<div class="texto">
<h3>Seleccione una opción:</h3>
<select id="seleccion" class="botones">
<option value="Piedra">PIEDRA</option>
<option value="Papel">PAPEL</option>
<option value="Tijera">TIJERA</option>
</select>
</div>
</div>
<div id="resultado">
<div class="texto">
<p>Aca va mi resultado</p>
<button id="nuevoIntento" onClick="window.location.reload();">Volver a intentar!</button>
</div>
</div>
<div id="computadora" class="estilo">
<div class="texto">
<h3>Haga click y espere resultado:</h3>
<button class="botones"> Click me!</button>
</div>
</div>
</div>
</body>
</html>
I am new to web development and currently building a site for a friend that is being modeled after this one: http://fulton-demo.squarespace.com/
While I have most of the elements into code and styled, I cannot figure out how to get the images and content to fill 100% of the width AND resize when the browser window is resized. Like, take the first image on the link I provided for example...I would like it to look like this, meaning to not have any margins on either side and fill the browser window....and I can get it to do that, but it never shows 100% of the image and when I resize the window, nothing moves. Does that make sense?
I know this is probably a very elementary question, but I would love some insight on this. I can post any and all code if necessary. Thanks in advance guys!
EDIT: Here is my code:
HTML:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<meta charset="utf-8">
</head>
<body>
<main id="mainContent" role="main">
<article role="article">
<section>
<header>
<div class="container">
<div class="single-item-rtl" dir="rtl">
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg"height="600px" width="1400px" align= center/></div>
<div><img src="img/6.JPG" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
</div>
<div id=logo><img src="img/SJ_WHT.png" height="170px" width="220x" align=center</div>
<div id=text-top-carousel>
<h1>a better way to book creative spaces</h1>
</div>
</div>
</header>
</section>
<section id="info">
<div class="info">
<div class="icon"></div>
<h2>unique spaces <br> that inspire</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>hassle free <br> booking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>share your <br>creative space</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="motto">
<h1>unleash your creativity</h1>
<p>We focus on your artistic expression at Studio Junkey. We believe that your creative process is limited when the necessary resources are not available to execute your vision. <br></nr> We want to ensure that you find the studio space that has the tools you need to express yourself and your vision</p>
</div>
</section>
<section id="contactForm">
<div class="form">
<h3>Want to list a studio space?</h3>
<p>We are looking for more studios.
Send us your information so we can connect.</p>
</div>
</section>
<footer role="footer">
</footer>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.single-item-rtl').slick({
rtl: true,
autoplay: true,
autoplaySpeed: 3000,
});
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}
html, body {
height: 100%;
width: 100%;;
padding:0;
margin: 0;
}
body {
font-family:"Brandon Grotesque";
}
#mainContent {
background: white;
width:1500px;
}
.container {
width: 100%;
max-width: 1400px;
height:600px;
text-align:center;
margin: 0 auto;
}
#logo {
position:relative;
top:-595px;
left:0em;
}
#text-top-carousel h1 {
position:relative;
top:-15px;
left:0em;
color:white;
font-size:55px;
padding: 10px;
}
#info {
margin: 0px;
clear:both;
}
.info {
width:466px;
height:400;
padding:10px;
background:white;
text-align: center;
color:#333333;
margin: 0px;
float:left;
clear: none;
}
.info.icon {
background:black;
border:1px solid white;
width:100px;
height:100px;
padding:10px;
margin-bottom: 25px;
}
.info h2 {
padding:300px 48px 10px 48px;
font-size: 45px;
margin-bottom: 0px;
margin-top: 0px;
line-height: 1em;
}
.info p {
padding:15px 50px 45px 50px;
margin: 0px;
font-size: 20px;
}
.motto {
background-image:url("img/6.jpg");
text-align: center;
color: white;
clear: both;
width:1400px;
margin:0 auto;
margin-bottom:0px;
height: 600px;
}
.motto h1 {
font-size: 60px;
padding-top: 90px;
margin-bottom: 20px;
}
.motto p {
font-size: 30px;
padding: 15px 100px 90px 100px;
}
#contactForm {
background: #EDEFED;
margin-top:0px;
width: 1400px;
height: 600px;
margin: 0 auto;
clear: both;
}
.form {
text-align: center;
margin: 0;
width:50%;
height:500px;
color:#333333;
clear:both;
}
.form h3 {
margin: 0;
font-size: 40px;
padding: 115px 185px 50px 185px;
}
EDIT 2: THANK YOU for all the help thus far everyone!....For those following along in the comments, the issue that I'm having now can be shown by this screenshot. The image carousel seems to be filling the left side completely fine, but the right side still isn't being filled at all, there's still some space between the right edge of the img carousel and the browser window when I scroll to the right.
Try adding this to your CSS..
.single-item-rtl img {
width: 100%;
height: auto;
max-height: 600px;
margin: auto;
}
Also remove the height width and align from the image tag or they'll override the CSS.
Slick tries to add arrows to the left and right side of the slider which is what is causing the issue. Since we're taking up 100% of the screen they have no place to go.
$('.single-item-rtl').slick({
rtl: true,
arrows: false
});
Edit:
Remove the width from #mainContent to make .container's with take up 100% of the screen.
Enclosing your content inside another element is helpful.
Note that you have to separate between enclosing elements required for your script to work, and those used to enchance your layout.
Also my solution implies you will ever be able to specify your image width in percent only. You can also add maximum and minimum properties.
.outer {
width: 5cm; // arbitrary
}
.full-width {
width: 100%;
}
.full-width img {
width: 15%;
max-width: 2cm;
min-width: 5mm;
}
<div class="outer">
<div class="full-width">
<img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"/>
</div>
</div>
Use Percentage widths!!!!
Something simple like this would do:
.myImageClass{
width: 50%;
/*by not setting height, it will auto scale*/
}
DEMO:
html,body{
margin:0;
padding:0;
}
.myFullImg{
width:100%;
}
.myHalfImage{
width:50%;
}
<img class="myFullImg" src="http://placekitten.com/g/200/200" alt=""/>
<img class="myHalfImage" src="http://placekitten.com/g/200/400" alt=""/>
I want to create a drop down menu (alternate to Browswer's <select> tag).
So Here I've created a <div> in another <div> to stimulate the <select>
But When I expand the dropdown <div> automatically parent <div> also expands making structure of page very dirty.
I mean, Here is output of my actual code:
When I click on Expand The Result Is:
But I want output, When I click on Expand like:
Here is My Code:
<html>
<head>
<title>Drop Down Demo</title>
<style type="text/css">
.ddown{
width:250px;
min-height: 25px;
background: #aaa;
border: 2px solid #777;
color: #444;
text-align: center;
margin: 0px;
display: inline-block;
}
.ddown a{
display: none;
width: 100%;
height: 25px;
text-align: left;
color: #666;
text-decoration: none;
background: #ddd;
border: 1px solid #999;
}
.ddownHead{
display: inline-block !important;
}
.ddownItem{
display: inline-block !important;
}
.ddownItem:hover{
background: #33a;
color: #fff;
}
.ddown_busy{
background: #77a !important;
border: 1px solid #558 !important;
color: #fff !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function toggle_expand_ddown(x){
if($(x).closest("div").find("a").eq(0).hasClass("ddown_busy")){
$(x).closest("div").find("a").eq(0).removeClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).removeClass("ddownItem");
});
});
}
else
{
$(x).closest("div").find("a").eq(0).addClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).addClass("ddownItem");
});
});
}
}
</script>
</head>
<body>
<div style="width:100%;height:25px;background:#aa0;border:2px solid #770;">
<div class="ddown">
<a class="ddownHead" href="#!" Onclick="toggle_expand_ddown(this);">Click to Expand</a>
<div>
Item 1
Item 1
Item 1
Item 1
</div>
</div>
This is Another Child in same Parent
</div>
</body>
</html>
I've Also Created Fiddle Here.
I think It is Because of CSS only. But However Any suggestions are welcome.Hope You'll Help me Soon.
I think you are having problem with opening and closing <div> tags
I tried to add a <div> tag to the another child and this **css**:
.div2{
display: inline-block;
position: absolute;
}
FIDDLE DEMO
or this without using position absolute by adding this css to your main div:
overflow: visible;
vertical-align: top;
FIDDLE DEMO 2
or by adding float:left to the .ddown css
FIDDLE DEMO 3
PS: I think option 1 is a better practice, you'll just have to put every child in a <div> tag
I'm trying to move a div inside a container div to another container div using jQuery sortable api. I have added the code in jquery ready function but for some reason it doesn't work.
Here is the code I added:
$(".portlet-content").sortable({
connectWith: ".portlet-content"
});
I'm adding the complete code below for proper understanding. Any help will be highly appreciated. Thanks in advance :)
<html>
<head>
<title>Javascript Create Div Element Dynamically</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style type="text/css">
body {
min-width: 520px;
background-color: dimgray;
}
.column {
width: 230px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
background-color: lightgray;
border: 2px solid white;
}
.portlet-content:hover {
background-color: lightblue;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
div {
min-height: 20px;
}
</style>
<script type="text/javascript" language="javascript">
$(function () {
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet-content").sortable({
connectWith: ".portlet-content"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all");
});
</script>
</head>
<body>
<div class="column">
<div class='portlet'>
<div class='portlet-header'><span class='rubrik'>Section 1</span></div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class='portlet'>
<div class='portlet-header'><span class='rubrik'>Section 2</span></div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</body>
</html>
$(".portlet").sortable({
connectWith: ".portlet",
items: ".portlet-content"
});