Not sure if this a stylesheet problem or what. The cstarratings are mushed together. The picture is actually showing 3 cstarratings into one line.
Other things I've tried in my css, display:inline; clear:both; remove float:right
my stylesheet enclosing the cstarrating:
.profile-rating-right-content
{
float:right;position:
relative;width:45%;
display:inline;
padding-right:5px;
padding-top: 10px;
}
my cstarrating widget is as follows:
<div class="profile-rating-right-content">
<?php $this->Widget('CStarRating', array(
'model'=>$data,
'attribute'=> 'star',
'minRating'=>1 ,
'maxRating'=>5 ,
'starCount'=>5 ,
'allowEmpty'=>false,
'ratingStepSize'=>1,
'callback'=>'
function(){
url = "index.php?r=user/review/updateStar";
jQuery.getJSON(url, {id: '.$data->review_id.', val: $(this).val()}, function(data) {
if (data.status !== "success"){
alert("error");
}});}'
));?>
</div>
This wasn't a stylesheet problem.
The IDs for each group were the same, so the widget needs
'name'=>'rating'.$data->id,
Related
Is there a selector that specifies CSS to only applied when matching a specific URL or part of URL?
For example, here is my CSS stylesheet:
p {
color: green;
}
url("home.html") {
color: blue;
}
url("about.html") {
color: yellow;
}
path("/path/index*") {
color: indigo;
}
When the user visits home.html I want the home.html selector to be applied. When I'm on the about.html URL I want the about.html to be applied.
CSS media queries allow you to switch to a different set of styles when the width of the view changes. It also lets you specify a different set of styles when the user is going to view on the screen or send it to a printer.
My question again is, "Is it possible to specify a different set of styles depending on the URL or values in the URL." So it's not a question of how to do what I'm asking but if it's possible to.
I am using a CMS and it has a theme that allows you to add your own CSS. There is one stylesheet. That's it. Not two but one.
And I have one page that has specific CSS to that page and only that page. That is the origin of this question. There may be a thousand workarounds but my question is not about the workarounds.
However since this has been answered I do not mind workaround answers related to the question.
It looks like the #document rule was proposed for just this case but it was removed from CSS3 spec and planned for CSS4. From my tests it does not appear to be supported and it's not listed on caniuse at the time of this posting.
The syntax is as follows:
#document url("http://www.example.com/widgets/") {
body {
color: white;
background: tomato;
}
}
/* The above applies styles only to the page at the given URL */
#document url-prefix("http://www.example.com/widgets/") {
/*
Styles written here are applied to all URLs that
begin with 'http://www.example.com/widgets/'
*/
}
#document regexp("https:.*") {
/* Styles written here are applied to all URLs that begin with 'https:' */
}
Test code using #media query for comparison:
var styleTag = document.createElement ("style");
document.head.appendChild (styleTag);
var sheet = styleTag.sheet;
sheet.insertRule ("#media (min-width:600px) { html {color:red}}", 0);
console.log(document.styleSheets.length);
Results:
// no errors, stylesheet is added
Test code testing #document rule:
var styleTag = document.createElement ("style");
document.head.appendChild (styleTag);
var sheet = styleTag.sheet;
sheet.insertRule ("#document url('http://www.google.com') { html {color:red}}", 0);
Results:
/*
Exception: SyntaxError: An invalid or illegal string was specified
#Scratchpad/3:4:0
*/
TIL about #document thanks to #BoltClock
More info
You could attach a data-url custom attribute to an element's parent tag, either in the HTML or using JavaScript, and then query that data's value in CSS. Here's a working example:
const urlHolder = document.getElementById("url-holder");
document.getElementById("changer").onclick = () => {
urlHolder.dataset.url = "https://mywebsite.com/about"
};
#url-holder[data-url*="blog"] .url-based{
background-color: red;
}
#url-holder[data-url*="blog"] .url-based::after{
content: "You're on the blog page!"
}
.url-based::after{
content: "You're not on the blog page."
}
.box{
width: 200px;
height: 200px;
border: 2px solid black;
margin: 5px;
}
<button id="changer" type="button">Change data-url to "https://mywebsite.com/about"</button>
<div id="url-holder" data-url="https://mywebsite.com/blog">
<div class="box url-based"></div>
<div class="box not-url-based"></div>
</div>
No idea how performant such a solution would be though.
To be sad there is no pseudo classes to select element's based on URL.The only way you can do it is by adding class to the body tag or specific element and then override the CSS.
if just for only HTML, use jQuery
<script>
var currentLocation = window.location.pathname;
if (currentLocation == 'home.html'){
$('head').append('<link href="home-style.css" rel="stylesheet">');
} else if (currentLocation == 'about.html'){
$('head').append('<link href="about-style.css" rel="stylesheet">');
} else {
$('head').append('<link href="index-style.css" rel="stylesheet">');
}
</script>
If use you WordPress:
Add your theme function.php
function site_stil_script() {
if ($_SERVER['REQUEST_URI']=='/YOURPAGE/') {
wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/assets/css/theme-difrent-style.css', array(), '20120208', 'all' );
} else {
wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/assets/css/theme-style.css', array(), '20120208', 'all' );
}
//other lines....
}
add_action( 'wp_enqueue_scripts', 'site_stil_script' );
I want to style the first element with a class that I've added through jQuery.
Unfortunately, my CSS styling is ignored when I use the :nth-of-type(1) selector.
Here is the Fiddle
When you click the button "World", the first word should be red but it isn't.
How do I use :nth-of-type to select an element after a jQuery updates the element?
You're using jQuery, fall back to it when CSS fails you. This doesn't mean inline styles, let's continue to use classes (modified fiddle):
Your new CSS:
.hidden {
display: none;
}
.seen {
display: inline-block;
}
.first {
color: red;
}
The new class .first replaces your attempt to match via CSS. We'll apply it with jQuery:
$( "button.1" ).click(function () {
$("span.1").toggleClass("seen hidden");
$("span").removeClass("first");
$(".seen:first").addClass("first");
});
$( "button.2" ).click(function () {
$("span.2").toggleClass("seen hidden");
$("span").removeClass("first");
$(".seen:first").addClass("first");
});
Now that things are working we've gotten to the point of "passing our test" (even though no test is written here, this is the point we'd be at). The next step is refactor. We've got some repetitive bits. Let's clean it up. Naively I may try and do this:
var selectFirst = function() {
$("span").removeClass("first");
$(".seen:first").addClass("first");
};
$( "button.1" ).click(function () {
$("span.1").toggleClass("seen hidden");
selectFirst();
});
$( "button.2" ).click(function () {
$("span.2").toggleClass("seen hidden");
selectFirst();
});
But in reality we can do much better by moving around some information in the HTML and changing our jQuery slightly (working fiddle):
Our new HTML looks like this:
<span class="hidden" data-number="1">Hello</span>
<span class="hidden" data-number="2">World</span>
<span class="hidden" data-number="1">Hello</span>
<span class="hidden" data-number="2">World</span>
<button data-target-number="1">Hello</button>
<button data-target-number="2">World</button>
Notice the usage of data- attributes. Much cleaner, the 1 and 2 as classes was really bogging down that attribute with useless information.
Let's see what effect that had on the jQuery:
$("button").click(function() {
var number = $(this).data("target-number"),
// This line could also be "span[data-number=" + number + "]"
targetSelector = ["span[data-number=", number, "]"].join("");
$(targetSelector).toggleClass("seen hidden");
$(".first").removeClass("first");
$(".seen:first").addClass("first");
});
That's it, only one function! No repeating ourself. The refactor was successful.
Try this:
.hidden:first-child + .seen, .seen:first-child {
color: red;
}
Working Fiddle
Updated to solve the issue represented in below comment:
.hidden:first-child ~ .seen, .seen:first-child {
color: red;
}
.hidden:first-child ~ span.seen ~ span.seen {
color: black;
}
Working Fiddle
Is there a way to hide a whole div if part of it is empty? For example if "dd" is empty as shown below can I hide the whole class "test" so the keyword Restrictions does not show either. I tried .test dd:empty { display: none; } but this does not work. thanks!
<div class="test"><dt>Restrictions:</dt>
<dd></dd></div>
I don't think there's any easy way to do what you're talking about with just CSS. Better to test it server-side if you can. But if you can't here's some JS that will do the job.
<script type="text/javascript">
// handles multiple dt/dd pairs per div and hides them each conditionally
function hideIfEmpty() {
// get all the elements with class test
var els = document.getElementsByTagName('dl');
// for every 'test' div we find, go through and hide the appropriate elements
Array.prototype.map.call(els, function(el) {
var children = el.childNodes;
var ddEmpty = false;
for(var i = children.length - 1; i >= 0; i--) {
if(children[i].tagName === 'DD' && !children[i].innerHTML.trim()) {
ddEmpty = true;
} else if(children[i].tagName === 'DT') {
if(ddEmpty) {
children[i].style.display = 'none';
}
// reset the flag
ddEmpty = false;
}
}
});
}
window.addEventListener('load', hideIfEmpty);
</script>
<div class="test">
<div style="clear: both;"></div>
<dl>
<dt>Restrictions:</dt>
<dd></dd>
<dt>Other Restrictions:</dt>
<dd>Since I have content, I won't be hidden.</dd>
</dl>
</div>
Just a fair warning: the code uses some functions that may not exist in older IE, such as Array.prototype.map, String.prototype.trim, and addEventListener. There are polyfills available for these and you could also write your own pretty easily (or just do it with a for loop instead).
CSS alone can't do that. Either, you need a javascript to retrieve empty elements and hide their parents, or your CMS applies special CSS classes if there's no content.
Put as an answer as requested by #Barett.
You could update your CSS to be
.test{
display: none;
color: transparent;
}
This would make the text transparent too, but display:none should hide it anyway.
To make the div with the id test ONLY show when the dd tag is EMPTY, and you can use jQuery, try the following JavaScript along with the CSS:
if($("dd").html().length ==0)
{show();
}
Note: this solution requires jQuery, which is a JavaScript library.
I have and angularjs application that fetches data via api, and builds a webpage with it.
Usually I use ng-style to create dynamic styling, but now I have to use the nth-of-type attribute that can only be used in a css stylesheet (I cannot use individual styling since the number and order of elements always change).
I have tried this naive code (in the html page):
<style ng-if="styles.sc && styles.sc.length==3">
a.mosection:nth-of-type(3n) > div {
background-color: {{styles.sc[0]}} !important;
}
a.mosection:nth-of-type(3n+1) > div {
background-color: {{styles.sc[1]}} !important;
}
a.mosection:nth-of-type(3n+2) > div {
background-color: {{styles.sc[2]}} !important;
}
</style>
But it didn't work... Apparently angular doesn't bind the data inside the style tag (the ng-if attribute does get digested properly)
Does anyone have any idea how this can be done?
Thanks!
You should checkout those three ng-*
https://docs.angularjs.org/api/ng/directive/ngClass
https://docs.angularjs.org/api/ng/directive/ngClassOdd
https://docs.angularjs.org/api/ng/directive/ngClassEven
all of them can accept functions as attributes, you can also checkout
https://docs.angularjs.org/api/ng/directive/ngStyle
which might be actually the best in your case
Thanks!
I indeed solved it by using ng-style with a function
The HTML
<div class="widget widget-people" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-people', '#333333')}"></div>
<div class="widget widget-property" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-property', '#24d10f')}"></div>
The scope function
$scope.staggerBgColors = function(elesClass, eleClass, defaultColor){
if (!$scope.styles || !$scope.styles.sc || $scope.styles.sc.length!=3){
return defaultColor;
}else{
var listItem = $('.'+eleClass);
var n = $('.'+elesClass).index( listItem ) % 3;
return '#' + $scope.preview.moment.sc[n];
}
}
I had to implement the same functionality of the css property "nth-of-type" using jQuery, but it works prefectly!
html
<p> Tags:<input name="tags" id="tags" /></p>
jquery
$('#tags').tagit( {tagLimit:3});
I want to control the size of input field,how can i do that ?
If you look at the dynamic HTML that is generated by the tag-it plugin, ul.tagit is the class assigned to the UL that is generated. So to set the width to 200px in your CSS set:
ul.tagit {
width: 200px;
}
(function( $ ) {
$.fn.extend({
tagit: function (params) {
return this.each(function () {
console.log(params);
console.log(params['tagLimit'] );
$(this).attr('maxLength', params.tagLimit );
$(this).parent().css('maxwidth', params.tagLimit );
$(this).parent().css('width', params.tagLimit );
});
}
} )
}( jQuery ));
But you can do it directly by jQuery too, like below:
var _width = 3;
$("p input").each( function() {
$(this).css('width', _width);
$(this).css('maxWidth', _width);
})
Since I had tag-it being used in multiple places, I decided to do it in Javascript. The size needs to be big enough that it doesn't do to a double line when you add tags to it. The basic code is:
// adjust tag it size
$("ul.tagit").attr("style", "width:450px;")
Offcourse, you can decide to choose something other than 450px.
However, I also wanted to line it up with other jquery-ui buttons, which I styled with ul, instead of li, so they would have a fairly snug fit with the search box. The bottom margin needs to be adjusted to have it line up more precisely with the buttons. Here is the code for that.
// adjust tag it size and line it up with buttons
$("ul.tagit").attr("style", "width:450px; display:inline-block; margin-bottom:-10px")