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;
}
Related
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
}
I am creating a header that, after scrolling, does a variety of things using CSS and Javascript. I must just be overlooking something that is preventing the underline on hover from changing from black to white after scrolling. It is supposed to always be the same color as the links.
Here's the link to see: http://www.exploreloudoncounty.com/
Any ideas? Thanks!
HTML:
<a class="nav__link" href="https://www.exploreloudoncounty.com/explore">Explore</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/join">Join</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/about">About</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/contact">Contact</a>
CSS:
.nav__link {
margin-right: 1em;
font-size: 1em;
color: #000;
text-decoration: none;
transition: 0.4s;
display: inline-block;
}
.nav__link::after {
content: '';
display: block;
width: 0;
height: 2px;
background-color: #000;
transition: width .3s;
}
.nav__link:hover::after {
width: 100%;
}
.nav__link.sticky a {
margin-right: 1em;
font-size: 1em;
color: #fff;
text-decoration: none;
transition: 0.4s;
display: inline-block;
}
.nav__link::after.sticky a {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
background-color: #fff;
transition: width .3s;
}
.nav__link:hover::after.sticky a {
width: 100%;
}
JS:
if (scrollPosition > 100){
document.querySelector('.nav__link').classList.add('sticky');
}
else {
document.querySelector('.nav__link').classList.remove('sticky');
}
You should change your css to this:
.nav__link.sticky::after
This because the .sticky class is in the same element as .nav__link.
And if you want to use the a element in your styling you should put this at the front of the code, like this:
a.nav__link.sticky::after
This because the classes are located within this element so the element has to be in front.
What errors do you get if you open console (by pressing F12)?
Because if this is your complete JS, then you'll be getting scrollPosition is undefined.
The source you linked has this JS and you see they declare it at the beginning as:
let scrollPosition = Math.round(window.scrollY);
They also wrapped it in a lodash function called _.throttle, but you can acieve the same with setTimeout, it just makes sure the function gets called every now and then (here 300 milliseconds).
I would like to complement #Kjvhout answer.
That solution works only for the first link due to the wrong selector on the JS part.
In order to fix it, I would do the following:
Remove the JS altogether, if you inspect the dom, you can see that the header contains already a sticky class, so no need to add a new one to the anchors.
Rewrite the CSS to match this DOM structure, something like this should work:
.sticky .nav__link:after {
display: block;
width: 0;
height: 2px;
background: #fff;
background-color: rgb(255, 255, 255);
color: #fff;
background-color: #fff;
transition: width .3s;
}
This should solve the issue and would be a better solution as you can get rid of the unused JS part.
The reason why #Kjvhout answer was working only for the first is the JS part, your selector document.querySelector('.nav__link') is only selecting one HTMLElement, to get all the collection you should use document.querySelectorAll('.nav__link') and then iterate over this collection and apply the corresponding class.
But as I said earlier, my solution is simpler as you don't need to deal with JS.
I've just added a Javascript function of changeText to make my site have the accessibility feature of making text larger in order for visually impaired users to be able to use my site with more ease. However upon clicking on the icon for 'larger text' which runs the javascript, it messes up my layout. How can I correct this? Would it be CSS? Here is the website:
[www.me14ch.leedsnewmedia.net/slate][1]
and the enlarge text icons are to the right hand side of the header. Or if this helps, this is the code:
<div id="font-size-buttons">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmin.png" width="25" height"25" alt="Switch to original text size and colours">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmax.png" width="30" height="30" alt="Switch to larger text and improved colour contrast">
</div>
And the Javascript:
function changeText(size) {
var obj = document.getElementsByTagName('html')[0];
obj.style.fontSize = size + '%';
}
Your div#font-size-buttons is inheriting your new font-size:150% rule, which pumps up its height to 48px after click.
To combat this you need to fix it height to let's say 32px, as so:
#font-size-buttons {
float: right;
clear: both;
margin-right: 5px;
font-size: 32px;
}
Hope this helps
EDIT:
You'll need these too:
.intro {
clear: both;
text-align: left;
padding: 4px;
line-height: 1.5;
}
.subgroup1 {
width: 64.54%;
float: left;
margin-bottom: 25px;
margin-top: 5px;
}
(I removed fixed height from .subgroup and decreased margin, to make div more "elastic")
#footer {
max-width: 1000px;
width: 100%;
color: black;
bottom: 0;
position: relative;
font-family: arial, palatino sans-serif;
font-size: 0.75em;
text-align: center;
background: #A3CC39;
clear: both;
border-radius: 5px;
}
(Again - removed height:20px from footer to make div adjusts itself)
Looking at the website yes you need to add css to it to draw your website and limit part of the website so the js does not affect things you dont want to.
but you would need to provide more code of your website so we can help you
I looked quickly and changing you whole css would be too long so the workaround I suggest is that your + and - only change your wrapper div as this is your main content. For this change in your js to be
<script src="accessjava.js">
function changeText(size) {
var obj = document.getElementsById('wrapper')[0];
obj.style.fontSize = size + '%';
}
</script>
and in the body change
<div class="wrapper">
to be
<div id="wrapper">
The last thing will be in your css to replace .wrapper by #wrapper to keep the same style you created.
Hope this will help
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.
I'm not sure if what i want is possible but i'm using a Mootools image gallery which you can see an example of here:
</script>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
The gallery rotation is above but what i'd like to achieve, ideally, is the second text element (with the white background) to be wider than the top text element, so it looks more like the picture underneath.
There's a lot of Javascript involved so i don't know what i should post here to enable people to help, but just let me know what i should put in here and i'll come back and edit.
Or, if some knows of somethign similar in jQuery which would allow me to get the same effect, but not require too much JS coding, i'd be much obliged.
Thanks in advance as always,
Dan
Try this css and see if its what your after.
.slideInfoZone {
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
top:40px;
color: #FFF;
text-indent: 0;
overflow: hidden;
padding: 10px 0 0 20px;
height: 70px;
}
.slideInfoZone h3{
background: #000;
width: 200px;
padding: 30px;
margin-left: -30px;
display:inline;
}
.slideInfoZone p {
position: absolute;
bottom: 0;
background: #FFF;
font-size: 14px;
color: #000;
margin: 20px 0 0 -20px;
padding: 10px 0 10px 20px;
width: 50%;
}
Basically what I did was remove your background color for the containing element, then I gave the p tag a bg color, and modified the padding/margin for the h3. Im not too happy with what I had to do with the h3 but without changing the markup at all it works.