I am trying to implement a star rating system for articles and found this nice plugin. I have exchanged the default star.gif with my own stars. Everything works fine if I use a full star rating. As soon as I am trying to use the split star function, the stars are not displayed correctly anymore.
The stars itself have a width of 32px.
The half stars should be on top of the right side of the full stars.
The following if-clause seems to be responsible for calculating the position:
// Prepare division control
if(typeof control.split=='number' && control.split>0){
var stw = ($.fn.width ? star.width() : 0) || control.starWidth;
var spi = (control.count % control.split), spw = Math.floor(stw/control.split);
star
// restrict star's width and hide overflow (already in CSS)
.width(spw)
// move the star left by using a negative margin
// this is work-around to IE's stupid box model (position:relative doesn't work)
.find('a').css({ 'margin-left':'-'+ (spi*spw) +'px' })
};
it is embedded in a "for-each star" loop. I have debugged this with firebug and the calculation seems to be correct. Each second star should have a left-margin of -16px.
For some reason this is not displayed on the site though.
Does anyone know what I am doing wrong? I have to mention that I do not have much experience with JS.
Here is the css:
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: block;
float: left;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 17px;
}
div.rating-cancel, div.rating-cancel a {
background: url("delete.gif") no-repeat scroll 0 -16px rgba(0, 0, 0, 0);
}
div.star-rating, div.star-rating a {
background: url("star.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
div.rating-cancel a, div.star-rating a {
background-position: 0 0;
border: 0 none;
display: block;
height: 100%;
width: 32px;
}
div.star-rating-on a {
background-position: 0 -32px !important;
}
div.star-rating-hover a {
background-position: 0 -64px;
}
div.star-rating-readonly a {
cursor: default !important;
}
div.star-rating {
background: none repeat scroll 0 0 transparent !important;
overflow: hidden !important;
}
I cannot really tell what went wrong here. First of all the width in this setting had to be adjusted. Then one might want to get rid of the float option and use inline-block on the display instead. That way the following components will be drawn in a new line.
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: inline-block;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 32px;
}
If I changed this value with firebug nothing happened. I replaced the css with the original file and then just added the changes I needed again and voilá, everything looks nice now.
Related
Heres an image of the issue I'm trying to resolve. I am working on my portfolio site; and I have images of some of my personal projects, all of them are the same width but some have different heights. Due to getting full page screenshots of my work, some of the images have a much greater height than others. Instead of allowing displaying all the images the same size and allowing scrolling in the modal window, it scales the images down to fit within the same height as all the others. This gives it an odd look cause some of the images get scaled down a lot. I would like to get all the images to display in the same width, and those that need it to allow scrolling to see the rest of the image. I tried to use overflow: scroll; on the .lightbox but that didn't help. I've also tried overflow-y. I would also like to disable the page in the background from being able to scroll, to allow the scrolling to be focused on the images that it is necessary on.
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
min-width: 100%;
height: auto;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
min-height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
Lightbox2 by default appends calculated width & height to the image and .lb-outerContainer. But you can override this by doing the following -
.lb-outerContainer {
width: 100% !important;
height: auto !important;
}
.lightbox .lb-image {
width: 100% !important;
height: auto !important;
}
I don't recommend this because this breaks the intended use of this plugin. I'm sure you'll find an alternative to lightbox2 that achieves what you're looking for. So you can consider this as a temporary fix.
EDIT: Here's a jsfiddle to see it work. https://jsfiddle.net/hsugx6wm/43/
On a website there is a black line on the left of a picture about 1 or 2 pixels long. I can't get rid of it after checking the code (border etc). I think its a javascript problem. The picture doesn't have the black line on the home page but does have it on subsequent pages. There is no margin etc. How would I identify/fix the problem
image with no black border
http://www.darkrome.com/tours/rome-tours/colosseum-coliseum-ancient-rome-tour
image with black border on left hand side
http://darkrome.com/tours/vatican-tours/extended-vatican-museum-tour-with-bramante-staircase
Check out your css and remove the background image.
Actually the float: left is causing the issue, so you can remove it afaik
#tourDetFluidOuter {
margin: 0;
padding: 0 0;
width: 100%;
height: 100%;
float: left;
background: url(/images/tour-detail-bg.gif) repeat-x 0 0;
}
this black border (actually it is not a border but a background) is produced by
#tourDetFluidOuter {
margin: 0;
padding: 0 0;
width: 100%;
height: 100%;
float: left;
background: url(/images/tour-detail-bg.gif) repeat-x 0 0;
}
just remove the background or cover it fully.
I've ran into a inconsistency with the sliding animation in jQuery and I'm not too sure how I can overcome it.
I basically have two floating divs that act as opening and closing doors:
.door-one{
float: left;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
And the animation to govern their movements:
$(document).ready(function(){
$('.home-button').click(function(){
$('.door-one').animate({width: 'toggle'}, 1000);
$('.door-two').animate({width: 'toggle'}, 1000);
});
});
The problem exists with the left floating element. You see, the right one moves off the page to the right (images and all) in one smooth motion. The left one however just gets 'covered' up and doesn't actually 'slide' off of the page.
Is anyone familiar with this? Is there anyway to get the left element to slide off the page properly?
The background image for right door works, because the float causes it to move right as the door's width shrinks. The background image simply goes along for the ride.
The background image for the left door does not work, because the door doesn't move left when its width shrinks.
An alternative would be to animate the left door's position rather than its width.
You can do this by removing float: left and adding absolute positioning for the left door. I don't think you can toggle left for this purpose. But you can animate it in one direction or the other based on its current offset.
Snippet:
$('.home-button').click(function(){
var d1= $('.door-one');
if(d1.offset().left < 0) {
d1.animate({left: '0'}, 1000);
}
else {
d1.animate({left: '-50%'}, 1000);
}
$('.door-two').animate({width: 'toggle'}, 1000);
});
html,body {
width: 100%;
height: 100%;
margin: 0px;
}
.door-one{
position: absolute;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="home-button">Click me</button>
<hr>
<div class="door-one"></div>
<div class="door-two"></div>
My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.
This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE
I have a parent div that is filled with multiple child divs (see here for what I'm talking about http://garyoak.com/images/MgMenu.png ). I'd like to be able to navigate it with keyboard only, so I was looking for a way to scroll the child divs up or down when the user pushes past the visible elements. I can figure out when the user has done that without a problem, but I'm not sure how to actually scroll the inner divs up/down. I have jquery available and can add extensions to it without a problem. I know of jquery plugins such as scrollable and carousels, however I'm hoping there is a much simpler way to do this.
the html ends up looking like this:
<div id="MaigcPanels" class="MagicPanels">
<div id="MagicPanel0" class="MagicPanelSelected"><div class="Ice"><div class="MagicName">Blizzara</div><div class="MPCost">36</div></div></div>
<div id="MagicPanel1" class="MagicPanel"><div class="Fire"><div class="MagicName">Fire</div><div class="MPCost">15</div></div></div>
.... (rest of panel divs)
</div>
the first div has MagicPanelSelected as its class as it's the currently selected div. I can guarantee that whatever the active/important div that I need to be displaying will always have this class.
In terms of usage scenario, I'm using this to design menus for a C++ game (so several pre-defined variables are being pushed into the page which is then rendered them via awesomium). This is why I'm looking to do this without the use of the mouse. Awesomium is based off a fairly recent build of Chrome, so the solution does NOT need to be cross-browser compatible, as long as it works on Chrome.
I can guarantee fixed length for the size of the parent div and child divs (once I decide on the appropriate length), however the number of MagicPanel divs may be loaded into the parent MagicPanels div at any one time range from 0 to 120+. I have variables available to tell me how many divs total and how many divs per row there are.
When the user scrolls past the set of divs, I'd like to be able to loop back to the start (either by quickly scrolling back to the top, or by loop the top divs again at the bottom)
If it's important, this is the css for those elements
.MagicPanels
{
width: 580px;
height: 160px;
left: 4px;
position: relative;
display: inline-block;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
border-width: 16px 16px 16px 16px;
-moz-border-image: url(MagicBorder.png) 33 32 33 34 round;
-webkit-border-image: url(MagicBorder.png) 33 32 33 34 round;
-o-border-image: url(MagicBorder.png) 33 32 33 34 round;
border-image: url(MagicBorder.png) 33 32 33 34 round;
z-index: 1;
overflow: hidden;
}
.MagicPanel
{
width: 150px;
height: 30px;
margin: 0 10px 7px;
opacity: 0.5;
display: inline-block;
position: relative;
}
.MagicPanelUnusable
{
width: 150px;
height: 30px;
margin: 0 10px 7px;
opacity: 0.3;
display: inline-block;
position: relative;
}
.MagicPanelSelected
{
width: 150px;
height: 30px;
margin: 0 10px 7px;
background-opacity: 1.0;
display: inline-block;
position: relative;
}
The other CSS classes (i.e. Fire, Ice etc.) just define the gradients/font for the text and have no effect on the layout of the divs.
If anyone knows how to do this, or can give me a good starting point I'd appreciate it.
Thanks
You can set the scrollTop of any dom element like this. I hope this might help you to apply logic in your code.
var valueToScroll = 100;
$("selector").scrollTop(valueToScroll);
//With animation
$("selector").animate({ scrollTop: valueToScroll }, { duration: 200 } );