changing the properties in a external CSS thorugh Javascript - javascript

There's an external CSS file and I want to change one of the property of a class using JS. The property "content" in this class should dynamically change with a local directory of images.
.carousel-cell {
width: 75%;
height: 580px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: gallery-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(gallery-cell);
line-height: 580px;
font-size: 80px;
color: white;
}
What changes should be done in order to take in list of images in a local folder using JS. The 'images' folder contains 8-10 images.
Thanks in advance for the help.

Related

Apply styling only on the text inside a DIV

I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.
The sample of HTML code is:
<div class="attr-marker">
Some-text-content <!-- Apply New Styling on it -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
<i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>
And the CSS which I tried but failed is:
.attr-marker text {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.
You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.
Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.
Here's an example:
.attr-marker:not(:empty) {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Let me know in case you have any questions.
Regards,
AJ
You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.
Like...
<div class="attr-marker"></div>
not
<div class="attr-marker">
</div>
And then the css would be,
.attr-marker:empty {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.
There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):
.attr-marker {
/* text properties */
/* some other properties */
}
Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.
That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.
As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.
Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.
Edit:
If you know exact position of your element then you can select it with nth-child pseudo-class:
.attr-marker:nth-child(1):not(:empty) {
border: 1px solid #333;
background-color: yellow;
}
If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:
.attr-marker {
display: block;
max-width: 12px;
max-height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
/*If required*/
overflow:hidden
}

Changing CSS content property dynamically

A friend of mine is renting a webshop from a company. He is able to choose from different templates, and has the ability to override the predefined CSS and add javascript snippets. He asked me to help her making several changes, but there is something I cannot deal with: the add to cart button. In the below CSS there is a "content" property that holds a predefined value. I would like to change the value of this property dinamically, based on the HTML lang attribute. Do you have any idea how could I achieve this? (I know how to get the value of the lang attribute. My problem is changing the value of the "content" property)
#add_to_cart:before {
display: block;
font-family: 'sosa';
font-size: 35px;
content: "Ä";
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: #fff;
}
Try this:
HTML:
<html lang="en">
...
<div id="add_to_cart" data-content="">example</div>
CSS:
#add_to_cart:before {
display: block;
font-size: 35px;
content: attr(data-content);
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: red;
}
JS:
$('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y"));
You'll see that the character before 'example' changes when lang attr of <html> is changed.
Write a Javascript function that updates the CSS. Javascript can access the HTML attribute.
document.documentElement.lang

Calculate row height in CSS grid with JavaScript

I made a small CSS grid framework for my new project but soon after, I have realized it has some shortcomings. Problem is, columns don't occupy whole height of a row which in turn prevents me from creating "blocky" layout and with current setup I can't achieve this with CSS.
I have solved this with some JavaScript, but what troubles me is that this peace of code needs to be executed after the page loads. Which means layout will be a bit messy if there's a lot of content to load.
Also, I'm not great with JavaScript so I'm not sure if I did this properly.
Here's link to source code on CodePen
[NOTE]
I don't want to use any JavaScript libraries
You can try using css table display property stack and use javascript as a fallback to unsupported browsers if required.
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
http://codepen.io/anon/pen/LEniv
Browser compatibility
http://jsfiddle.net/cDZpA/
.container {
position: relative;
font-size: 0px;
overflow: hidden;
}
.col {
display: inline-block;
width: 33.333%;
font-size: 14px;
vertical-align: top;
height: 100%;
position: relative;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.c1 { background: yellow; }
.c2 { background: purple; }
.c3 { background: red; }
Don't ask me how, but this code I've put down works.
Here your CodePen fixed:
http://codepen.io/anon/pen/wkbrj

Add Javascript Onclick To .css File

I wonder whether someone may be able to help me please.
I'm using this page to allow users to view a gallery of their images.
You can see that I've added a cross at the bottom of each image which I will use to delete the image and this is set up in my .css file as:
.galleria-thumbnails .galleria-image {
width: 80px;
height: 80px;
float: left;
margin: 0 7px 7px 0;
border: 2px solid #fff;
cursor: pointer;
background: url(cross.png) no-repeat bottom;
padding-bottom: 20px;
background-color:#FFFFFF;
The problem I have is that I'm very unsure how to link the image in the separate .ccs file with the Javascript command to delete the image which is on my gallery page.
I just wondered whether someone may be able to provide some guidance on how I may go about overcoming this problem.
Thanks and regards
You need to add an element (e.g. span) which can handle the click. I can see that you actually already have something like this:
<span class="btn-delete icon-remove icon-white"></span>
You even have the click handler already:
$(".btn-delete").live("click", function()
{ var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src")); return false; });
All you need to do is apply the styles so you can actually use this. Something like:
.galleria-thumbnails .btn-delete {
display: block; /* Or just use a div instead of a span*/
position: absolute;
bottom: 0px; /*align at the bottom*/
width: 80px;
height: 80px;
cursor: pointer;
background: url(cross.png) no-repeat bottom;
}
CSS is for styling, while JS is for behavior. You can't mix the two, and both are not related in terms of functionality. what you need is a JS that removes the image.
a standards compliant, JS version
var db = document.querySelectorAll('.galleria-thumbnails .btn-delete'),
dbLength = db.length,
i;
for(i=0;i<dbLength;i++){
db[i].addEventListener('click',function(){
var thumbnail = this.parentNode;
thumbnail.parentNode.removeChild(thumbnail);
},false);
}
a jQuery 1.7+ version is this:
$('.galleria-thumbnails').on('click','.btn-delete',function(){
$(this).closest('.galleria-image').remove()
})
If you set this above style sheet with in a <td> just write onclick event...
here a sample
<td id="Homebutton" runat="server" style="height: 35px; width: 101px; cursor: pointer;"
class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
onmouseout="this.className= 'menubuttonhome'">
Home
</td>
here my css
.menubuttonhome
{
background-image: url('Images/homebutton.png');
background-repeat: no-repeat;
vertical-align: top;
color: #005a8c;
font-family: Arial;
padding-top:11px;
font-size: 10pt;
font-weight: 500;
}

jQueryMobile and Themeroller - do you need to re-roll themes when updating jQueryMobile?

I am using jQueryMobile 1.1-rc1 and my pageloading indicator is not displaying correctly.
I originally made my theme when the themeroller first came out, and everything has been fine through the last few updates of jQM until the most recent.
Now the loading icon doesn't spin and is no longer centered in the bubble.
Do you need to re-roll themes in themeroller when updating? I don't see the option of selecting the target version in themeroller.
I noticed that the old file name was ajax-loader.png. I think it is now ajax-loader.gif, so you might want to double check that.
The last few updates to the framework have changed the CSS quite a lot, and that will continue for the 1.1 release. When you change to a newer version of the JS file then you should also re-package your theme from the Themeroller.
In the last update they changed the CSS framework quite a bit for fixed headers/footers, transitions, and some other things (like the loading message has been revamped). The last update also gave the loading message more options so the structure of the HTML probably changed and the old CSS isn't quite right compared to the new JS.
To test this you can link to a standard current version of the CSS and see if the loading message appears correctly.
I took another look at this and the answer is that ThemeRoller for jQueryMobile is only compatible with 1.0.x release of jQM.
Todd Parker Answered the question here in the jQueryMobile issue tracker.
Tyler Benzinger Answered the question here in the Theme Roller issue tracker.
It seems we will have to wait for Theme Roller to support version 1.1 themes.
Update: Solution
In your theme.css comment out or delete the .ui-icon-loading section and insert the following (from the 1.1-rc1 css)
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radiu$
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }
/* loading icon */
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 46px 46px;
}
Make sure you have the new ajax-loader.gif file in the theme images folder.

Categories