I'm a newbie to Bootstrap and I'm having a problem getting two sibling columns to render to the same height under a parent DIV. Basically, I'm trying to create a "blackboard" next to the video which I'd like to render 100% with the video player but with a black background when the page loads.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Responsive Custom Video Player</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.jumbotron {
padding: 0;
margin-bottom: 0;
}
.blackboard {
background-color: #000;
color: #fff;
min-height: 100%;
margin: 0 auto;
text-align: left;
}
</style>
<div class="row jumbotron">
<div class="player col-sm-6">
<video width="100%" poster="videos/poster.jpg" id="videoPlayer">
<source src="videos/BigBuckBunny_512kb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="blackboard col-sm-6">
BLACKBOARD
</div>
</div>
</body>
</html>
The "blackboard" DIV is only rendering the height of the text inside the DIV. The jumbotron's default background-color of #eee fills the rest of the DIV.
This works but it seems a bit hacky. Add ID selectors to those two DIVs and:
// Force blackboard to the same height as the player.
$(window).resize(function() {
$("#blackboard").height($("#player").height());
})
$(window).resize(); // On page load
Related
I am triying to install a floating likebox in prestashop website
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.abtlikebox span a{color: gray;text-decoration:none;}
.abtlikebox span a:hover{text-decoration:underline;}
}
</style>
<div class="abtlikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span></span>
</div>
</div>
The problem that all website break when i add jquery in head
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
How to use this code without jquery.min.js?
I think that jquery are included in prestashop
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var currentImage = $('#slider div');
var nextImage = $('#slider').find('div').next;
var animation = .animate({'marginLeft' : "-=900px"}):
$(document).ready(function(){
$(currentImage).click(function(){
$(currentImage).animate();
});
});
</script>
</head>
<body>
<div id="slideshow">
<div id="slider">
<div id="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
</body>
</html>
and CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#slideshow {
width: 100%;
float: left;
}
#slider {
margin: 10px auto;
height: 360px;
width: 900px;
border: 1px solid #999;
overflow: hidden;
}
#slider #image {
height: 360px;
width: 900px;
float: left;
position: relative;
z-index: 2;
}
This is a HTML (with Jquery in it) and a CSS file.
What i am trying to do is that if you click on an #image, the #image wil animate 900px to the left.
But i have a problem because nothing happen if i click on #image.
Can someone help me?
P.S. I am from the Netherlands, so I apologise if I have bad English.
You have a lot wrong with your script ... try this out:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slideshow">
<div id="slider">
<div class="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var currentImage = $('#slider').find('div').first(),
nextImage = currentImage.next();
currentImage.click(function(){
$(this).animate({marginLeft:"-=900px"});
});
});
</script>
</body>
Couple points:
As was called out, make your images use a class instead of an id if you want to reuse the name. Multiple elements with the same id is invalid HTML.
You did not close <div id="slideshow"> ... I added the closing tag.
Move your script down to the bottom of the body ... this is best practice to improve the speed of page rendering (otherwise the page needs to parse the entire script before displaying any content).
Your use of .next() was incorrect ... it is a function, and all functions are called at bare minimum with open/close parenths.
You were already caching #slider div, so I leveraged that existing cachine when searching for nextImage (I applied the .first() function because it will get all of the divs if you don't filter it somehow.
Your storage of the animation was ... wrong, in about every way possible. You can store the animation in variable as a function, but only for reuse, and clearly you are not ready for that yet. I moved the animation down to where it should be, which is applied to the element in the click event itself.
When referencing the DOM names in the .animate() function, you only need to apply quotation marks if you use the CSS version ('margin-left' instead of marginLeft).
No guarantees that this will do what you think it should do because your CSS is ... too much to handle right now, but at least your HTML and JS will now be valid and you can focus on the problem at hand.
I am using HTML5/JS to build my app and the CSS is not applying for some reason. I am still seeing the default color. Can I not override it when you press windows+I?
Here is the CSS for reference:
.win-settingsflyout {
background-color: #fff;
}
You can just create a class to apply the color.
<style>
.colors{background-color: lightblue;}
</style>
then add this class to your div tag. <div class='win-content colors'></div>
Hope it'll work!
you can't, you'll always get the color of your Start Screen
Here in my sample app for the 'about' flyout. Is the background is red.
<div class="win-content" style="background: red;">
The full code:
<!doctype HTML>
<html>
<head>
<title>About</title>
<script src="//Microsoft.WinJS.1.0/js/base.js" type="text/javascript"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js" type="text/javascript"></script>
<script type="text/javascript">WinJS.UI.processAll();</script>
<script src="/js/about.js"></script>
<link href="/css/about.css" rel="stylesheet" />
</head>
<body>
<!-- BEGINSETTINGSFLYOUT -->
<div class="apback" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App Settings Flyout" data-win-options="{settingsCommandId:'about',width:'narrow'}">
<!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
<div class="win-ui-dark win-header" style="background-color: #333333"> <!-- Background color reflects app's personality -->
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label"><span data-win-res="{textContent: 'info'}"></span></div>
<img src="../images/smalllogo.png" style="position: absolute; right: 40px;"/>
</div>
<div class="win-content" style="background: red;">
<div class="win-settings-section">
<label>Test App</label>
<label>users</label>
</div>
</div>
</div>
<!-- ENDSETTINGSFLYOUT -->
</body>
</html>
You can "push" the change of you settings flyout background color with this CSS code:
.win-settingsflyout {
background-color: #fff !important; background: #fff !important;
}
I have a problem with my responsive flexslider plugin. The plugin works fine unless you have many images in the actual slideshow. The loading behavior is then just not acceptable.
I was hoping someone can help me with the following flexslider image preloader script since I can't get it to work.
Here is the code I'm using:
FLEXSLIDER HTML
<div class="slider">
<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
<ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); ">
<li style="float: left; display: block; width: 940px; ">
<img src="image1.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image2.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image3.jpg">
</ul>
</div>
FLEXSLIDER SCRIPT IN HTML HEAD
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider"
start: function(slider) {
slider.removeClass('loading');}
});
});
</script>
FLEXSLIDER.CSS
.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;}
Any help is appreciated!
Instead of using the slider object from flexslider, try just making the slider element itself a jQuery object.
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
var target_flexslider = $('.flexslider');
target_flexslider.flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider",
start: function(slider) {
target_flexslider.removeClass('loading');
}
});
});
</script>
I tried for many time and for me it worked like this:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
start: function(slider) {
slider.removeClass('loading');
}
});
});
</script>
And on flexslider.css
.loading {min-height: 300px; background: url('loader.gif') no-repeat center center !important;}
Note the "!important" part, it didn't work without because it was colliding with flexslider's default white background. I set the html like
<div class="flexslider loading">
I managed to get it working using the callback "before" instead of "start".
So the JS bit would be:
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider"
before: function(slider) {
slider.removeClass('loading');
}
});
});
</script>
Try adding for each li 'style="display: none;"', except the first li. It should work.
I was struggling with this too, and the answer is really simple in fact. The only thing that is wrong in your code is this:
<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
And in your css you define for loading the class .loading
So you must change the clas for that div. Like this:
<div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">
I copied an example from the dojo site using Borderlayout. However, when I load in the browser , the entire data is shown for all the section . Then after a few second the content is refersh and the data is displayed correctly.
here is code that i copied . Thanks for your help
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; } #borderContainer
{ width: 100%; height: 100%; }
</style>
</head>
<body class="tundra ">
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true"
liveSplitters="true" id="borderContainer">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading"
style="width: 100px;">
Hi
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
Hi, I'm center
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (window.pub) {
window.pub();
}
});
</script>
This looks a bit upside down : you should put your javascripts in the head section and load the dojo libraries in first place. That's not your problem though.
What happens is that when the page loads, dojo loads all the modules that you "dojo.require", then parses all your tags containing the attribute "dojoType" and processes them for rendering, and this takes time.
So the flickering that you're seeing is the difference between the page before and after the widgets are parsed.
You should add a preloader div and hide it once the page is parsed (see this example).
This is what it would look like for your example :
<html>
<head>
<title>Preloader example</title>
<!– every Dijit component needs a theme –>
<link rel="stylesheet"
href="http://o.aolcdn.com/dojo/1.4/dijit/themes/soria/soria.css">
<style type="text/css">
#preloader,
body, html {
width:100%; height:100%; margin:0; padding:0;
}
#preloader {
width:100%; height:100%; margin:0; padding:0;
background:#fff
url(’http://search.nj.com/media/images/loading.gif’)
no-repeat center center;
position:absolute;
z-index:999;
}
#borderContainer {
width:100%; height:100%;
}
</style>
<!– load Dojo, and all the required modules –>
<script src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript">
var hideLoader = function(){
dojo.fadeOut({
node:"preloader",
onEnd: function(){
dojo.style("preloader", "display", "none");
}
}).play();
}
dojo.addOnLoad(function(){
// after page load, load more stuff (spinner is already spinning)
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser");
// notice the second onLoad here:
dojo.addOnLoad(function(){
dojo.parser.parse();
hideLoader();
});
});
</script>
</head>
<body class="soria">
<div id="preloader"></div>
<div dojoType="dijit.layout.BorderContainer" id="borderContainer" design="sidebar" gutters="true" liveSplitters="true">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">Hi</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">I'm Center</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
if(dojo.isIE){
addEvent(window, 'load', function(event) {
dojo.parser.parse();
});
}else{
dojo.addOnLoad(function(){
dojo.addOnLoad(function(){
dojo.parser.parse();
});
});
}
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
disable parseOnLoad and manually add event to parse widgets for ie.