Position of elements changes after JWplayer loads - html

I have a video loaded in jwplayer and a small video queue with thumbnails positioned right alongside it. For some reason, when my player loads, it pushes the entire queue down below the player, despite it being right next to it otherwise. It is behaving as if the container is too small, but if I make the videoWrapper larger I get the same behavior.
HTML:
<div id="videoWrapper">
<div id="video"></div>
<script type='text/javascript'>
jwplayer('video').setup({
file: <?php echo '\''.$sex.'\''?>,
width: '750',
height: '420',
primary: 'flash',
autostart: 'false'
});
</script>
<div id="queueList">
Up Next
<input type="image" src=<?php echo $thumbs[0]; ?> class="thumb" />
<input type="image" src=<?php echo $thumbs[1]; ?> class="thumb" />
<input type="image" src=<?php echo $thumbs[2]; ?> class="thumb" />
<input type="image" src=<?php echo $thumbs[3]; ?> class="thumb" />
</div>
</div>
CSS:
#videoWrapper{
display:block;
width:872px;
height:420px;
margin-top:40px;
margin-left:auto;
margin-right:auto;
}#queueList{
width:120px;
height:420px;
float:right;
}.thumb{
margin-top:7px;
width:120px;
height:auto;
background:black;
}#video{
width:750px;
height:420px;
background:black;
color:purple;
float:left;
}
If anyone can provide any sort of reason why this is happening or a work around I would very much appreciate it.
A live look at what I am talking about can be seen here: http://porndoraone.com/test2.php
The orange boxes should be inside the black border, adjacent to the video.

Solution seems to be very simple. All what you have to do is style #video_wrapper, created by jwplayer, like this:
#video_wrapper {
float: left;
}
See this JSFiddle with working demo.

Related

Align a href to top of div text to a div

I'm trying to align an a tag to the top of my div in bootstrap. This is the current code I have:
<div class="authorAvatar">
<img src="<?php echo $author->avatar;?>" style="width:auto;height:50px;">
<a href="profile.php?id=<?php echo $author->user_id;?>">
<?php echo $author->username;?>
<?php echo $author->points;?>
</a>
</div>
What I am trying to achieve is the user's avatar being displayed, and then next to it, the username and the user's points directly below it. I have tried used the following CSS code:
.authorAvatar {
display:inline-block;
float:right;
height:50px;
}
.authorAvatar a {
display:inline;
vertical-align: text-top;
}
But the a href is centered in the div. I have also tried adding a position:relative to the authorAvatar and a position:absolute; and top:0px; to the a tag, but then the image is underneath the a href tag.
Here is a plunkr:
http://plnkr.co/edit/9HVQ4U3UjjqaiHzlxqkO
How can I achieve something of this effect:
image username
image points
image
If you are using bootstrap, try using the boostrap's css classes instead of your own css.
<img class="img-responsive pull-left"src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="height:50px">
<a class="pull-right"href="#">blabla</a>
.authorAvatar {
display:inline-block;
float:right;
height:50px;
}
.authorAvatar img{
display: inline-block;
}
.authorAvatar a {
display: inline-block;
vertical-align: top;
}
<div class="authorAvatar">
<img src="http://lorempixel.com/100/100/nature/" style="width:auto;height:50px;">
<a href="profile.php?id=<?php echo $author->user_id;?>">
<?php echo $author->username;?><br>
<?php echo $author->points;?>
</a>
</div>
Check whether this effect fits what you need.
http://plnkr.co/edit/bdzuVhgAqaP6Bi6pLqOW?p=preview
html:
<link rel="stylesheet" href="style.css">
<div class="authorAvatar">
<img src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="width:auto;height:50px;">
<a href="profile.php?id=1>">
<div>blahblahblah</div>
<div>blahblahblah</div>
</a>
</div>
css:
.authorAvatar {
height:50px;
}
.authorAvatar a {
display:inline-block;
vertical-align: top;
}

Div class display:none not working

I am new to CSS and so still finding my way a little...
I am trying to add a row of images at the bottom of my development website
This works fine for the desktop browser but I want to hide all but the Trustwave logo on mobile devices.
My theme is responsive and the following code works fine in jFiddle but not on my website. Please could someone point out where I have missed something?
I know that I need to move the inline styling out to the CSS file but was first trying to find why display:none is not working properly.
HTML:
<div id="ft">
<div class="ftI">
<div class="ftT">
<?php echo $this->getChildHtml('newsletter') ?>
<?php echo $this->getChildHtml('cms_footer_links') ?>
</div>
<div class="ftB">
<span class="copr"><?php echo $this->getCopyright() ?></span>
<?php echo $this->getChildHtml('footer_links') ?>
</div>
</div>
<?php /** ADD LOGOS TO FOOTER */ ?>
<div class="ftLogos" style="width:80%; height:56px; margin:0 auto;">
<div class="ftFb" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-facebook.png" alt="Find us on FaceBook" /></div>
<div class="ftTw" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-twitter.png" alt="Follow us on Twitter" /></div>
<div class="ftSt" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-stripe.png" alt="Secure Card Payments by Stripe" /></div>
<div class="ftPp" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-paypal.png" alt="Pay Securely by PayPal" /></div>
<div class="ftTr" style="float:left; width:20%; text-align:center; margin:0 auto;"><script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?style=normal"></script></div>
</div>
CSS (in the section for small screens only):
.ftFb {display:none;}
.ftTw {display:none;}
.ftSt {display:none;}
.ftPp {display:none;}
I'm happy to learn if there are better ways to format and ask questions on here :-)
Thanks,
Hugh
Your issue looks to be you hiding it for all. You will need to remove it from media=all
media="all"
.ftTw {
display: none;
}
Looking through the css using chrome inspection. It looks like your media queries are doing the following. So for all except ftTr, they are hidden using the following code.
media="all"
#media screen and (min-width: 768px)
.ftPp {
display: none;
}
media="all"
.ftPp {
display: none;
}
The only icon i see is ftTr and its always shown. The rest are always hidden. I would suggest reviewing how your creating the media css.

Using css to keep elements centered

I'm dynamically adding select dropdowns with jquery into a div. I would like to begin with the div centered and then as the new dropdowns are added to move out from the center outwards.
Here is the CSS for the divs:
#pageMiddle{
width:940px;
margin:0 auto;
text-align: left;
position:relative;
}
#searchBar{
background: red;
width:500px;
margin: 0 auto;
}
#searchwrapper{
width:850px;
background: blue;
}
#searchwrapper form {
display:inline ;
margin: 0 auto;
}
and the actual HTML:
<div id="pageMiddle">
<div id="holder">
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">
I am looking for a
<div id="sBar1" style="display:inline;">
<select id="search_level" class="selectSearchBar" name="search_level">
<?php echo "<option>Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
</select>
</div>
<div id="sBar2" class="selectSearchBar"></div>
<div id="sBar3" class="selectSearchBar"></div>
tutor in
<input type=text class="searchbox" id="location" value="Location"/>
<input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form>
</div>
</div>
</div>
</div>
I assume you mean something like this?
Notice the blue section is centered in the red section. This was done with the table display, which allows something of indefinite size to be centered via automatic margins. Otherwise, it must be a block element and have a definite size.
#searchwrapper
{
display: table;
margin: 0 auto;
}
<?php echo "<option style="text-align:center;">Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
Let me know if this works please.

Can't get my image to show

I am having an issue with a page I'm building. I have a Js cycle with some outside-div-contained controls and the arrow_back class will show the hover state, but it won't show the normal state. The exact same code works for the arrow_forward button (including native & hover states.) Here is the css for it:
.arrow_back{
width:42px;
height:42px;
position:relative;
z-index:9999;
left:8px;
top:-83px;
}
.arrow_back:hover{
background:url(../images/arrow_back_hover.png) no-repeat;
}
.arrow_forward{
background:url(../images/arrow_forward.png) no-repeat;
width:42px;
height:42px;
position:relative;
top:-84px;
right:-637px;
z-index:9999;
}
.arrow_forward:hover{
background:url(../images/arrow_forward_hover.png) no-repeat;
}
and the html:
<div class="image">
<div class="slideshow">
<img src="images/inside/cycle1.jpg" />
<img src="images/inside/cycle2.jpg" />
<img src="images/inside/cycle3.jpg" />
</div>
</div>
<div class="controls">
<img src="images/arrow_back.png" width="42" height="42" class="arrow_back" />
<img src="images/arrow_blank.png" class="arrow_forward" />
</div>
If anybody could offer some advice. I've been staring at code all week so far, and my brain is a bit toasted. It's probably something very obvious I just need fresh eyes on.
You're missing the background image for the arrow_back class.
.arrow_back{
background:url(../image/arrow_back.png) no-repeat;
width:42px;
height:42px;
position:relative;
z-index:9999;
left:8px;
top:-83px;
}
.arrow_back:hover{
background:url(../images/arrow_back_hover.png) no-repeat;
}
Also, I removed the javascript tag since this doesn't really have anything to do with javascript.

Equal height Joomla modules to the tallest one in a row

There are several method on the web to set height of columns equal. One of the best, I think, is "Equal Height Columns with Cross-Browser CSS".
But there's a problem to apply that method on Joomla module structure and I couldn't figure out how to get it to work.
I used rounded module chrome (with one main background for module and another background image for inner DIV to wrap modules bottom) on Joomla template source so each module renders this way:
<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</div>
</div>
and I use 3 modules in a row that wrapped in a parent DIV.
This is the code:
<div style="width:904px; margin:20px; float:left; overflow:hidden; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user4" style="rounded" />
</div>
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user5" style="rounded" />
</div>
<div style="float:right; width:288px; height:100%;">
<jdoc:include type="modules" name="user6" style="rounded" />
</div>
</div>
</div>
</div>
And finally there's css related to the Joomla module's style:
div.module-gallery, div.module, div.module_menu {
width:291px;
background:url(../images/module-bg.png) no-repeat 50% bottom;
}
div.module div div div, div.module_menu div div div {
padding-right:15px;
padding-left:15px;
background:url(../images/module-bg-bottom.png) no-repeat 50% 100%;
padding-bottom:15px;
min-height:230px;
}
div.module div div div div, div.module_menu div div div div {
background:none;
}
How can I set modules height equal automate/dynamically with saving Module background style.
You need to take a look in templates/system/html/modules.php.
You can then create a copy of module chrome to output your module structure, which would be more beneficial since you code is kinda outrageous to read and isn't very semantic. i.e.
function modChrome_myModuleName($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".moduleOuter { your style }";
$css .= ".moduleInner{ your style }";
$doc->addStyleDeclaration($css);
?>
<div class="moduleOuter">
<div class="moduleInner">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
<?php
}
You'd then guess call the module with a style, like so:
<jdoc:include type="modules" name="left" style="myModuleName" />
From then on, you'll have a more semantic way of calling your modules and making it easier to get your CSS heights to work.