I am trying to learn some tab Javascript by studying Codepen examples, but every time I paste the code to another place, it all changes. To show you what I mean, I took the html, css, and JS from this pen and pasted it directly to a JSFiddle, which got me a broken result.
http://codepen.io/todd01925/pen/awGzD
http://jsfiddle.net/PJu8b/
...
thanks for the help
It's because in codepen you can use LESS and on jsfiddle you can't ;)
Only LESS allow to nested css.
Fixed code: http://jsfiddle.net/PJu8b/2/
So instead of:
.tabs {
li { ...}
a { ...}
do:
.tabs li {...}
.tabs a {...}
Related
I'm trying to convert the following CSS
img.rsImg.rsMainSlideImage {
display: inline-block;
}
Into Javascript
$('img').closest('.rsImg').closest('.rsMainSlideImage').css('display', 'inline-block');
And something I'm doing seems to be a bit off. I used the same script with a single div and it worked, but this is a bit nested.
What about
$("img.rsImg.rsMainSlideImage").css("display", "inline-block");
I am quite stumped. I am not sure what I could have done to break the accordion function in either the Accordion Shortcode plugin nor the CSS Accordion code I just tried. Mostly I need to understand how to troubleshoot these so I am throwing my self at your mercy so I can help get this site back to proper functionality.
First, the page with the Accordion Shortcode: http://londoncapital.biz/partners/global/
I was using Symple Shortcode plugin till I had to reinstall the site then that plugin stopped working. I suspect this was related to the WP3.7.1 upgrade but I cannot be sure. So I decided to just find another plugin that did work and the Accordion Plugin worked and looked better for the site so I was happy. At some point, while going through and fixing some of the oddball issues that popped up after the reinstall (weird spaces that somehow were being generated from the restored backup) and the Better WP Security plugin being overzealous in its protection, I was happy with the Accordion Shortcode plugin. Then...it stopped working. Because I could not track down what I had possibly done I decided to look into an alternative accordion and found a CSS version. Thought that was perfect and would get away from any plugin incompatibility but alas this too has failed. It currently collapsed and it will not expand.
CSS Accordion page: londoncapital. biz /test-home
I followed this site: http://www.hongkiat.com/blog/css-content-accordion/ and referenced the CSS file like so:
#import url("../onyx/accordion.css");
I suspect there is a simple answer but damned if I can figure it out. Thank you for any efforts in advance!
This file is sitting in the same directory as the normal style.css (style4.css for this template to be exact).
Your Section ID's are missing as required to trigger the target.Though you added ID's to Anchor tag.
Demo : <section id="#about">...</section> http://jsfiddle.net/dhanith/7y7mY/
Following on from my comment above: you've solved one problem by adding the IDs, but there's now another problem. You've swapped the sections in the HTML for div, but you haven't changed the CSS to match. Change all the instances of .accordion section to .accordion div like so:
.accordion section:target { ... }
.accordion section:target:hover { ... }
.accordion section:target h2 { ... }
.accordion section:target h2 a { ...}
to
.accordion div:target { ... }
.accordion div:target:hover { ... }
.accordion div:target h2 { ... }
.accordion div:target h2 a { ...}
You'll also need to do the same for .horizontal section and .vertical section. See this JSFiddle to see it in action
Is it possible to change the css (e.g. Color) of a scrollbar at runtime, by clicking in a button?
This just needs to work in Google Chrome, so I'm using:
::-webkit-scrollbar {
width:15px;
}
::-webkit-scrollbar-thumb {
background-color:#999;
border:solid #fff;
}
::-webkit-scrollbar-thumb:hover {
background:#777;
}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;
}
I made this example at jsfiddle: http://jsfiddle.net/wZwJz/
Where I added this button:
<button id="changecss">Change CSS</button>
And a jQuery listener:
$("#changecss").on("click", function(){
// Action goes here
});
I tried this: $("::-webkit-scrollbar").css("backgroundColor", "#F00"); but obviously there's no element called ::-webkit-scrollbar, so it's impossible for jQuery to find it...
You can't select psuedo selectors as mentioned here:
link
Your code will need to do something like this:
$("#changecss").on("click", function(){
var ss = document.styleSheets[0];
ss.insertRule('::-webkit-scrollbar {background-color: red}', 0);
});
Scrollbars seem to be even weirder as seen in this fiddle however:
http://jsfiddle.net/wZwJz/4/
The color doesn't change until you hover over it. I'm kind of interested in learning more about this actually. So I'll try to figure something out. However you should be headed in the right direction now at least.
Edit:
So after a little bit of fiddling and googling, I'm going to say this is impossible as of now. Here's the latest fiddle with some notes: link
After some more hours and many tries I figured out how to solve this.
Here is the jsfiddle: http://jsfiddle.net/promatik/wZwJz/18/
So the trick is to add the class before the specific scrollbar css:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
Then the body, must have one of this classes (In jsfiddle I'm adding the class by javascript because I can't control the html manually):
$("body").addClass("blue");
And the button just need to toggle the .red and .blue classes.
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
There's also a problem with the rendering of the scroll bar in Chrome (at least until v25), that can be overcome by removing scrollbars, and adding it again, here is a function for that:
// Hack to force scroll redraw
function scrollReDraw() {
$('body').css('overflow', 'hidden').height();
$('body').css('overflow', 'auto');
}
Okay, so I am working on a game-center. I got this cool idea so when I mouseover a hyperlink it shows a scary face (just for kickz & gigglez);
The problem is, it works perfectly in Firefox, but not Google Chrome? The demo is over here:
http://bouncygames.org/games/scary/
Please help... :(
*My Question: * *How come this is not working in Chrome, and how can I fix this?*
You don't need any javascript whatsoever, just use this css-declaration and it will work perfectly in all browsers:
#img{
display:none;
}
a:hover ~ #img{
display:block;
}
To make it more specific (so that it will not trigger on all hovered anchors), put a class onto your anchor and write ( e.g. .scary:hover ~ #img ).
Don't use onmouseover and onmouseout these are considered bad coding practice for several reasons.
Also, don't use the center tag, but use the css-declaration text-align:center instead.
In your script, instead of using img.style.visibility, use
img.style.display="none";
and
img.style.display="block";
make sure you also remove the visibility='hidden' attribute from your img tag or it won't work
There is a space between getElementById and ('img'), remove that and try again.
Seen this done before, am curious as to how it is done. Example can be found over at http://wordographic.info/
For example, if I tag a post blue, the bg-color of the post turns blue, etc.
Anyone know how this is done?
Thanks.
Found a way to do this with only HTML/CSS. Pretty simple, just add the {Tag} block to any div class wrapping the post area but make sure it's between {block:Posts} and {block:Text} etc. Now whatever you tag a post now becomes a new class.
{block:Posts}
{block:Text}
<div class="post {block:HasTags}{block:Tags}{Tag} {/block:Tags}{/block:HasTags}">
{block:Title}<h2>{Title}</h2>{/block:Title}
<p>{Body}</p>
</div>
{/block:Text}
{/block:Posts}
Pay attention to the third line down. it is important to add a space after {Tag} otherwise they won't be seperated in the HTML.
The CSS would look like this:
.post { /* default style */
background: #ccc;
float: left;
margin: 10px;
position: relative;
}
.blue { /* when tagged blue, use this style */
background: blue !important;
}
Works! Pretty simple, no jquery required!
Thanks Blender, wouldn't have thought of this for some reason if I didn't read your jquery method :)
With jQuery, anything's possible! This isn't going to work right away, so tweak it for your theme:
$('.post-class .tag-container .tag').each(function() {
$(this).closest('.post-class').addClass($(this).text());
});
It is nothing to do with JS, such things are done on server-side. Depends on tags some properties are set to posts and then they are taken into consideration while rendering them to HTML.
You want to get the post's tags as class names so you can style posts with CSS, and there is a variable you can use for this purpose. In your template simply use {TagsAsClasses}. This will render HTML friendly class names.
An HTML class-attribute friendly list of the post's tags.
Example: "humor office new_york_city"
For detailed explanation see Post chapter in Tumblr docs.