I am trying to create a simple slideshow with Jquery but I am messing up my height attribute for the container. I need the height to be "auto" because I would like to keep the aspect ratio stable when resizing. here is an example of my code, thanks!
<!DOCTYPE html>
<html lang="en-US" dir="ltr"
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.1"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
var i = 0;
var slides = ["#slide_2", "#slide_1"];
var imgSrc = new Array(2);
imgSrc[0] = "banner1.png"
imgSrc[1] = "banner2.png"
jq(document).ready(slideShow);
function slideShow(){
slides.reverse();
jq(slides[0]).attr("src", imgSrc[i]);
jq(slides[0]).fadeIn(1000);
jq(slides[1]).fadeOut(1000);
setTimeout("slideShow()", 5000);
i = (++i >= imgSrc.length)? 0: i;
}
</script>
<style type="text/css">
.slide {
position:absolute;
}
</style>
</head>
<body style="background:#a9a9a9;">
<headder id="branding" role="banner" style="display:block; background:#d0d0d0; width:100%; height:auto;">
<h1>Example</h1>
<div id="slideshow">
<img id="slide_1" class="slide" src="banner1.png"/>
<img id="slide_2" class="slide"/>
</div> <!-- #slideshow -->
</headder>
<div id="main">
<p>Lorem ipsum eu usu assum liberavisse, ut munere praesent complectitur mea. Sit an option maiorum principes. Ne per probo magna idque, est veniam exerci appareat no. Sit at amet propriae intellegebat, natum iusto forensibus duo ut. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris.</p>
</div> <!-- #main -->
<footer id="last" role="contentinfo" style="background:#3c3c3c;">
<p style="color:#f9f8f0;">test site</p>
</footer>
</body>
</html>
thanks for your responses!
In my case what finally worked was to wrap all my images over another empty jpg(700bytes) image with the same resolution as my slides and position:relative.. it's faster and lighter than javascript, scales with the window and is totally respectful to the "flow" of the document.
note: to create an empty jpg with custom dimension you can find the 0xFFC0 marker in the header. The 3nd and 4rd byte after it is the y dimension and the 5rth and 6th is the x.
Cheers ;)
Here you can wrap all your images with a div or any tag and apply some fixed height to that div. in this way it will not affect aspect ratio of your image
Related
This is my Vue code and I am using bootstrap-vue, I am using the sidebar inside the card body Ideally it should only appear inside the card-body but it's not working. How can I make it fit either inside the outer div or b-card body?
<template>
<div class="">
<div>
<b-card title="Card Title" body-class="text-center" header-tag="nav">
<template v-slot:header>
<b-nav card-header tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</template>
<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>
<b-card-body>
<b-sidebar visible="true" title="Sidebar" shadow>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img
src="https://picsum.photos/500/500/?image=54"
fluid
thumbnail
></b-img>
</div>
</b-sidebar>
</b-card-body>
<b-button variant="primary">Go somewhere</b-button>
</b-card>
</div>
</div>
</template>
The sidebar wasn't really designed to be inside a container. but instead be used as an off-canvas menu for the entire page.
However, you can hack it a bit to fit your needs with a little CSS.
The sidebar is position: fixed by default, so that it is fixed to the viewport.
You need to change this to position: absolute, so that it will be positioned based on the closest parent that is position: relative. In this case that's the card.
In the snippet the sidebar goes over the title. If you want it only inside the body, all you need to be is wrap it in another element with position: relative
new Vue({
el: "#app"
});
body {
padding: 1rem;
}
.my-sidebar.b-sidebar-outer {
position: absolute !important;
height: 100% !important;
}
.my-sidebar .b-sidebar {
position: absolute !important;
height: 100% !important;
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<!-- The height is only here for the example -->
<b-card style="min-height: 300px;" class="overflow-hidden" no-body>
<b-card-header>
<b-card-title>Title</b-card-title>
</b-card-header>
<b-sidebar id="sidebar-1" title="Sidebar" shadow class="my-sidebar">
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
</div>
</b-sidebar>
</b-card>
</div>
I solved by modifying the style of the element by using JQuery where top': '60px' is going to be the hight of the navbar.
mounted() {
$('#sidebar-1').css(
{'top': '60px',
'opacity': '80%'
}
);
},
I am new to web components.
I am trying to create a web component that looks like a "drop down / select".
when the element is closed but visible (not expanded) I would like it to be presented on the screen in the regular flow of the web page. Under it is some text that is not part of the control.
When the control is expanded, The expanded part should cover (go above) the text that is displayed under the control.
In practice the text is being pushed down.
Changing the control's css places the visual part over the text that should be below it.
I would appreciate ideas how to address the issue of creating a control that one part of it should be in the "flow" of the web page and the other part should "float" above the web page and located in relation to the visual part.
The following code is the web component: drop-down.html
<template id="drop-down">
<style>
.row {
z-index: 5;
position:relative;
background-color: white;
}
.drop-down {
z-index: 5;
position: relative;
background-color: red;
}
</style>
<div class="drop-down">
<div class="row">
<button onclick="addListElement(this);">+</button>
<input type="text" placeholder="Enter List Item">
</div>
</div>
</template>
<template id="list-item">
<div class="row">
<button onclick="addListElement(this);">+</button>
<input type="text" placeholder="Enter List Item">
</div>
</template>
<script>
let ddTemplate = document.currentScript.ownerDocument.querySelector('#drop-down');
let liTemplate = document.currentScript.ownerDocument.querySelector('#list-item');
customElements.define('drop-down', class extends HTMLElement {
constructor() {
super(); // always call super() first in the ctor.
let shadowRoot = this.attachShadow( {mode: 'open'} );
shadowRoot.appendChild( ddTemplate.content.cloneNode( true ));
}
});
function addListElement( el ) {
var parent = el.parentNode;
parent.parentNode.appendChild(liTemplate.content.cloneNode(true));
}
</script>
The html that tests it is the following: testDropDown.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Drop-Down</title>
<link rel="import" href="./drop-down/drop-down.html">
</head>
<body>
<drop-down>My Drop Down</drop-down>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br/>
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim<br/>
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br/>
aliquip ex ea commodo consequat. Duis aute irure dolor in<br/>
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla<br/>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in<br/>
culpa qui officia deserunt mollit anim id est laborum."
</p>
</body>
</html>
I'm using Bootstrap 3.3.2 to create two columns. Each column has a heading, a bordered div with text of an unknown length, and an image. I need the bordered divs with text to be the same height, but only when the columns are side by side. If the window is narrow enough for the columns to be stacked, they should not be the same height. How can I achieve this?
I realize I could use JavaScript to set the shortest div's height to be the same as the tallest div's height, but the problem with this method is that when the user decreases the width of their browser window, the text overflows outside of the div.
Here is my code (jsFiddle demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.equal {
border: 3px solid #333;
padding: 8px;
}
img {
display: block;
margin: 20px auto 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Foo</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Eamne rationem igitur sequere, qua tecum ipse et cum tuis utare, profiteri et in medium proferre non audeas? Duo Reges: constructio interrete. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Est, ut dicis, inquit; Id enim ille summum bonum eu)qumi/an et saepe a)qambi/an appellat, id est animum terrore liberum. An est aliquid, quod te sua sponte delectet?</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
<div class="col-md-6">
<h1>Bar</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Quid, quod res alia tota est? Maximus dolor, inquit, brevis est. Nihilo beatiorem esse Metellum quam Regulum. Honesta oratio, Socratica, Platonis etiam. Duo Reges: constructio interrete.</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I know this is similar to this question, but I think it's actually different.
var equal1 = $(".equal1").height();
var equal2 = $(".equal2").height();
if(equal1 < equal2 ){
$(".equal1").height($(".equal2").height());
} else {
$(".equal2").height($(".equal1").height());
}
Please, see this
Demo result
or
Demo with code.
Just with pure CSS you can solve it with flex.
You can add another class to your row class and then apply the styles on that class.
<div class="container">
<div class="row row-eq-height">
<div class="col-xs-6">
...
In the css add:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap; /*to enable responsiveness*/
}
.row-eq-height > [class*="col-"] {
display: flex;
flex-direction: column;
border: 1px solid green;
}
You can check a demo here.
Updated !
Try DEMO
Using JavaScript
$(".equal2").height($(".equal1").height());
Do Read http://www.ejeliot.com/blog/61
I'm trying to create a page where clicking on a thumbnail image in the left column reveals text in the right column. Then there would be a number of thumbnails which each have their own text that appears in the same place in the right column when clicked.
I'm wondering if there are any CSS or jquery projects out there that do this kind of thing?
Thanks
I think this is what you are wanting, i made a jsFiddle with it.
HTML:
<div id="wrapper">
<div id="left">
<p>THUMBNAIL #1
</p>
<p>THUMBNAIL #2
</p>
<p>THUMBNAIL #3
</p>
</div>
<div id="right">
<!-- Each div here will contain the text to be show on the right -->
<div id="textOne" class="text" style="display:block;">
<h1>one</h1>
<p>Zzril amet nisl consequat claritas litterarum. In aliquam dolore qui diam veniam. Ut exerci ullamcorper ut sit dolor.</p>
</div>
<div id="textTwo" class="text">
<h1>two</h1>
<p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
</div>
<div id="textThree" class="text">
<h1>three</h1>
<p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
</div>
</div>
</div>
CSS:
a {
text-decoration:none;
}
#wrapper {
width:600px;
}
#left {
margin-top:100px;
overflow:hidden;
float:left;
width:20%;
}
#right {
overflow:hidden;
float:left;
width:80%;
}
Javascript (jQuery 1.9.1)
$(".text").hide();
$("#left a.one").click(function () {
$(".text").hide();
$("#textOne").fadeIn();
return false;
});
$("#left a.two").click(function () {
$(".text").hide();
$("#textTwo").fadeIn();
return false;
});
$("#left a.three").click(function () {
$(".text").hide();
$("#textThree").fadeIn();
return false;
});
please give a look to my http://jesica89.blogspot.com there is a problem that post description is coming after thumbnail , i know this can be solved by setting , i find a solution to it by firebug ::
p:{display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
please someone tell me how to edit this because i can't find this in my source code , i tried to use this div[ ] to override inline stylesheet but noting happened
here goes the post body html code
<!-- begin blog item -->
<div class='postBox'>
<h1><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if></h1>
<div class='entry'>
<div class='clear'/>
<p><b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if></p>
</div>
<div class='clear'/>
</div>
<!-- end blog item -->
</b:includable>
You have
<div class="entry">
in which you have
<div id="summary2601058450852975397">
in which you have
<p><img width="230" height="180" src="http://1.bp.blogspot.com/-edk8FaVPqKs/Tg2PwaOkfdI/AAAAAAAAAF8/n0BE2A5VPBY/s1600/love-relationship.jpg"/><p>
followed by
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae justo tellus. Suspendisse vel lobortis orci. Donec sit amet purus tincidunt felis semper auctor at in libero. Nunc vel nisi accumsan metus volutpat faucibus. Maecenas sit amet nulla<p>
This is the order of your HTML so it will display in that order. If you want the last paragrpah to show first, just change you HTML order.