Change html Text with conditional css but without js - javascript

Sorry about this absolutely newbie question, but I've been searching for an already similar post, and couldn't find it.
My question is:
I have a paragraph text in my HTML code which I want to automatically change into a new text once I click a specific Button.
Can this be done with CSS only, without any javascript?
Since some users block javascript, that's why I was looking for a way around...
Thanks a lot.

actually #Vaidya & #Preet it is possible via css only :
https://css-tricks.com/swapping-out-text-five-different-ways/
#fana you'll need to use a plus selector or tilde selector to make the changes affect the following div not itself but other than that you're good to go.
I can see that using css to replace content is strongly discouraged within the stackoverflow community. However I haven't found another cause other then that of code cleanliness.
I really think in coming years the true potential of CSS/SASS will unravel and people will cease to see the programmatic/dynamic as strictly excluded from CSS/SASS.

It can't be done through CSS You must need to add a script for an on-click event.

I know it is not what you exactly want but it can give you idea about it and with some changes you can make it.(but conditional and on click event using css is definitely not possible, you need javascript for that)
If you can make it work on Text click itself then it is easily possible. You only need a checkbox which is hidden and label in which you will show text. On click of text you can swap into anther text with only css:
#example {
position: relative;
}
#example-checkbox {
display: none;
}
#example-checkbox:checked + #example:after {
content: "Hide";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}
<input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>
Reference See css only part.
Hope it will help you.

Related

how to style class element?

I have a js library on my website which is creating popups for me.
Im trying to style the popups but nothing is working.
the html output is
<div class="lpopup zoom" style="opacity: 1; transform: translate(435px, 200px); bottom: -6px; left: -54px;">
All that I have been trying to is change the bottom and left position.
When I inspect with fire bug the css is
element.style {
bottom: -6px;
left: -54px;
opacity: 1;
transform: translate(435px, 200px);
}
I have tried manipulating the css by doing
.lpopup, .lpopup zoom, .lpopup.style, lpopup element.style {
bottom: 30px;
}
But none of them are working, I've tried as many variations as I can think of.
I have also tried with js
$(".lpopup zoom").css("bottom", "30px");
and other variations
nothing happening though
Im really struggling just trying to change the element style of a popup.
Thanks for any help
The content in the style attribute is more specific then any rule-set, so it will always come last in the cascade and be applied.
The clean solution is: Move the initial CSS out of the style attribute and into the stylesheet. Then write your rules while paying attention to specificity.
The hacky solution is: Use the !important flag
The really nasty solution is: Use JavaScript to change the style attribute (which is what you are trying, but you have the selector wrong).
.lpopup zoom will match: <anything class="lpopup"><zoom> This element </zoom></anything>
You want .lpopup.zoom which will match an element that is members of both classes.
You need .lolup.zoom { css here }.
Sorry, I didn't fully comprehend the question like Mr. Alien did. Yes, inline styles will always override external styles, so you either need to use !important (which I'd avoid), or remove the inline style if possible.
writing style in your own page wont works....
You just open your popup js library and change the style which are added throught the script...
It is very easy way to customize your popup design in js file....
.lpopup{//css here}
.zoom{//css here} should exist in your css file.

Custom alert boxes NOT jquery where?

I have tried to find some custom alert boxes , which don't use some libs like: jQuery, Prototype etc.. I want to get plain sample, which has rich UI as jQuery but doesn't use it.
I have tried to google, but have found an army of jQuery samples... I don't need it. Maybe you have links on websites with the plain js samples, which don't use some libs?
Because I want to get plain samples with rich UI, which are not based on libs like: jQuery, Prototype.js, Enyo etc
Thank you!
I think these links wil help you:
http://www.codeproject.com/Articles/28812/Custom-Alert-Boxes-using-JavaScript-and-the-DOM
http://www.gayadesign.com/diy/customize-the-default-alert-function-of-javascript/
3.http://www.scriptiny.com/2008/04/custom-javascript-dialog-boxes/
It's not very difficult. Basically all you've got to do is append both something to cover the whole screen and something to show the content to the body and position them correctly and attach event listeners to the right elements to remove it at the right time. All (well, most) of the positioning and styling can be done with CSS. For example, to position the thing to cover the whole screen, you could use this CSS:
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
You might even want to make it a little translucent so it's easier to tell that the dialog is modal:
background: rgba(0, 0, 0, 0.2);
Try out a little example.

CSS for dynamic inserted elements

Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C
I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute
In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out

Need to add stable HTML & CSS into jquery "ContentFlow"

I ma helping someone out to make a web site but I cant find solution how to add HTML & CSS instead of images in the javascript "ContentFlow" it has been downloaded here: http://www.jacksasylum.eu/ContentFlow/
here you can see how it looks with html text:
http://portfoliodummy.medienbayer.de/ContentFlow_mb_test/
as you can see when you move the blocs the text goes up and down! I have tried to add padding to it. not to assign font-size... but it wont work. I need to know if anyone has any idea or maybe solution. I know that images are the best way to go but he wants it to be with HTML.
Thank you for your Help
.ContentFlow * {
margin: 5%; /*adjust the value as you prefer */
}
.ContentFlow .flow .item div.content {
overflow: hidden;
}
tested only on chrome/linux. :-)
This improves the situation. Not sure if further improvement is possible.
You could use
.ContentFlow .flow .item div.content {
overflow:hidden;
white-space:nowrap;
}
Then do hard breaks <br /> on the content to ensure each item fits in the box. There'll be some clipping on resize but you won't have a bounce. You could probably automate where to put the breaks with a little javascript magic too.

Is linking a <div> using javascript acceptable?

I want to link an entire <div>, but CSS2 does not support adding an href to a div (or span for that matter). My solution is to use the onClick property to add a link. Is this acceptable for modern browsers?
Example code:
<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
<div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>
My test page is at http://www.designbyhawk.com/pixel. Updated daily.
Thanks for the help.
You don't need to do that. There's a perfectly simple and standards-compliant way to do this.
Block-level elements will by default take up the entire available width. a elements are not by default block-level, but you can make them so with display: block in CSS.
See this example (no Javascript!). You can click anywhere in the div to access the link, even though the link text doesn't take up the whole width. You just need to remove that p element and make it an a.
Attaching a click event handler to a <div> element will work for your users with JavaScript enabled.
If you're looking for a progressive enhancement solution, however, you'll want to stick with a <a> element.
It is acceptable, only it's not good for SEO.
Maybe you can make a <a> element act like a div? (settings it's style to display:block etc.)
It will work in every browser(even IE6). The only problem with this is that search engines probably won't fetch it since it's javascript. I see no other way to be able to make an entire div click-able though. Putting an "a" tag around it won't work in all browsers.
If all you're trying to achieve is a large clickable box, try setting the following CSS on an anchor:
a {
display: block;
padding: 10px;
width: 200px;
height: 50px;
}
HTML:
<div class='frommage_box'>
<a href='location.html'>CONTENT GOES HERE</a>
</div>
CSS:
.frommage_box a{
display:block;
height:100%;
}
By default block elements take up 100% width. We adjust the height to 100%. And this will allow spiders to crawl yoru page.

Categories