I have a problem with my YouTube iFrame: it becomes not clickable when I set margin (negative ones). And that is not what I want! I would like the visitor to be able to play the video on my website.
To add a bit more context, it is a Bootstrap website, and the video is in a timeline. I set negative margins, so that I do not lose space on the page. If I do not set margins, I get a left item - everything on the right is blank -, then after scrolling to the end of the first item, I get the second one on the right - but everything is blank on the left, and so on...
I tried to use relative and absolute positions, but it does not work in bootstrap timelines (every item crash together when I change it).
Do you have any idea or clue about this issue?
Here is what my HTML looks like:
<li style="margin-top: -140px">
<div class="timeline-badge"><i class="fa fa-gamepad" id="round"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Solitaire Android app</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> November 2016 - Work in Progress</small></p>
</div>
<div class="timeline-body">
<p style="margin-bottom: 10px;">This solitaire card game is an Android application, that tells the player when there is no more move to do.
This feature exists on iOS but not on Android, as far as I know.
So I wanted to do this to avoid the player to lose time in looking for a solution that does not exist.
You can play by dragging and dropping cards on the screen.
I plan to publish it on the Play Store! </p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A2nMAct2w88"></iframe>
</div>
<p style="margin-top: 10px;"><i>Technologies used: Java, Android</i></p>
</div>
</div>
</li>
And here is a link to my WIP-website, if it can help :)
http://horlogehumaine.net16.net/slegras/code.html
Are you talking about the small video in, say, "Solitaire Android App"?
If so, it's being relatively positioned among other relative/absolutely positioned things that are "covering" it.
Give .embed-responsive a z-index:1;
Related
Here in the demo shown http://plnkr.co/edit/4BahcwPQp2vUi9rAEEXR?p=preview i'm facing two issues which can be resolved using simple css/bootstrap code.
Below are the issues i am facing.
1) I am trying to show the content on the right side when user click any option present on the left hand side. Right now when user click on any link(OS packages,Option Two), the content is displayed in the down to the options listed ass hown in the plnkr demo. Any suggestions how to show the content on the right hand side when user click on any of the option.
2)And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.
html code:
<div ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="modal-body">
<div class="row">
<div ng-controller="MainCtrl">
<div class="workspace">
<div class="sidebar-wrap">
<h3>Click below options:</h3>
<div class="sidebar-contents">
<a class="nav clearfix"
ng-click="showOsPackages=!showOsPackages; optionTwo=false;"
ng-class="{ 'active' : showOsPackages }">
OS Packages
</a>
<p>
<a class="nav clearfix"
ng-click="optionTwo=!optionTwo; showOsPackages=false"
ng-class="{ 'active' : optionTwo }">
Option Two
</a>
</p>
</div>
</div>
<div class="" ng-show="showOsPackages">
<h1>OS Packages</h1>
<p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
</div>
<div class="" ng-show="optionTwo">
<h1>Option Two</h1>
<p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
</div>
</div>
</div>
</div>
</div>
js code:
var app = angular.module('plunker', ["ngAnimate"]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'slideout steeze';
});
Any suggestions would be helpful.
I checked your code. Here are the corrections.
I am trying to show the content on the right side when user click any
option present on the left hand side. Right now when user click on
any link(OS packages,Option Two), the content is displayed in the
down to the options listed ass hown in the plnkr demo. Any
suggestions how to show the content on the right hand side when user
click on any of the option.
Firstly I wrapped your content in a wrapper div with a class contents-wrap then the sidebar-wrapper and contents-wrap can be set to 30% and 70% respectively, so that we get the desired result.
CSS:
.contents-wrap{
display:inline-block;
width:70%;
float:left;
}
.sidebar-wrap{
display:inline-block;
width:30%;
float:left;
}
And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.
For this I suggest setting the respective variable to just true, instead of toggling the input.
Plunkr Demo
But here is a even better version, where you only use one variable toggle and you set the selected tab name to the toggle variable, using this method, the number of variables needed to be defined is reduced.
Plunkr Demo
I searched several of the suggested questions that came up when typing this, but I couldn't find an answer to my problem.
I'm using Uikit V2, and I have a div with the Sticky component. Here:
<div class="uk-sticky" data-uk-sticky id="nvbr">
<nav class="uk-navbar-center">
<a class="uk-button" href="#pg5"><h3>Contact</h3></a>
<a class="uk-button" href="#pg6"><h3>AboutUs</h3></a>
<a class="uk-button" href="#pg3"<h3>Services</h3></a>
</nav>
</div>
This works fine on the full screen, but when I resize to a small screen, the bar gets very wide. I open then in the inspector in Chrome and I get this line:
<div class="uk-sticky-placeholder" style="height: 123px; margin:0px;">
Where would this be in my code and how can I fix it? I looked in Uikit and the Uikit.js.
(I should note, that when I am in Inspector, if I change that 123px to say 10px, it looks fine.)
Thanks all.
I think it just counts height based on collapsed elements in the viewport.
https://github.com/uikit/uikit/blob/v2/develop/src/js/components/sticky.js#L286
The thing I would do if I were on your place, I would hide navbar elements on smaller devices with conditional classes and prepare of canvas menu (take a look inside docs).
Or try to take over control with your own js script.
<div class="list" ng-controller="ListController">
<div class="list-item list-item-flex" ng-repeat="collaborator in collaboratorList">
<div class="list-left list-left-flex">
<img ng-src="images/{{collaborator.imgUrl}}" width="190px" height="190px"/>
<div class="padded-text">
<h1 class="collab">{{collaborator.name}}</h1>
<p>{{collaborator.info}}</p>
</div>
</div>
<div class="list-right list-right-flex">
<a class="mail" href="mailto:{{collaborator.email}}"> {{collaborator.email}}</a>
</div>
</div>
This is my template for previewing collaborators with their images and info. Every time I close the browser and start it again, upon loading this template the height is normal, but the width of the images is 50.466px even though I've set the width both inline and in CSS. If I resize the window or refresh it they go back to the desired width of 190px. It would be great if someone can help me figure out why this happens.
Edit: This does not seem to happen in Firefox, it does in chrome and IE.
Edit2: I have finally found the solution. My it was a flex-box issue, I have made the image align to the left and the text to the right and all works fine now.
I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect
It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.
I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.
This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.