I am wondering if you can help. I am previewing my code in a Firefox build system using Sublime text 3. The HTML and CSS are fine however my jQuery dosen't work despite being properly linked etc. Here is my code:
I just observed one thing, you are adding the class and removing it immediately on hover hence the div is unaffected
Try this code, if you are trying to add the class only on hover and remove it when not hovered
$('#manifesto').mouseover(function() {
$(this).addClass('manifestotitle');
}).mouseout(function(){
$(this).removeClass('manifestotitle');
});
For reference see the following jsfiddle:
http://jsfiddle.net/x3965auq/2/
Hope this helped
I see in your CSS that "manifestotitle" refers to an id (#manifestotitle) could you try converting it to a class?
EDIT: Ok, I think I got it. I downloaded your code and messed around a bit. This is what I changed to make it work:
Change your CDN for jquery to the official one:
"manifestotitle" should be a class as your javascript is using it as one. So you should make these changes. In your HTML:
<div class="manifestotitle">
And in your CSS file:
`.manifestotitle {`
Fix your selector in your js:
$('#manifesto').hover(function () {
That got it working for me, hope it helps!
Not an answer however need to show more code!
It seems I can't get .hover() and .mouseover() functions to work at all with my code...here is a simple example (using a class rather than an ID also):
HTML:
<div class="left"><b>Nick Reilly</b>
<P><b><i>(Holding Page)</i></b></P></div>
CSS:
.left {
color: #000000;
left: 50px;
position: fixed;
top: 40px;
font-size: 18px;
z-index: 100;
line-height: 15px;
}
jQuery:
$(document).ready(function(){
$("#left").mouseover(function(){
addClass('.red');
});
});
Surely this should simply change the text I have to red when the mouse is over it? When I preview it in both a Firefox and Chrome build nothing happens!
Thanks
Related
I am trying to use getorgchart jquery plugin. And I want to remove the 'GetOrgChart' hyprlink which is showing in the bottom of the screen. I have tried removing it from getorgchart.js file but it is still showing up. Is it part of the theme? How Can I stop showig it on my webpage???
Please help..
Try this, It worked for me.
Add following code in your html page.
$(document).ready(function(e) {
setInterval(function(){ $('a[title="GetOrgChart jquery plugin"]').hide(); }, 10);
});
Open file getorgchart.js and find eval(eval("String.fromCharCode(blah3x...)"))
and delete it or comment.
Try This,
In your orgchart.html page, paste this snippet
<div style="display: block; position: absolute; bottom: 15px; right: 0;z-index: 214748336480 !important; height: 25px; width: 100px; background: #333;"></div>
Change width, height and background to your liking. But make sure z-index is higher than what I have mentioned, this is the important point here. Hope this helps. Thank you.
In order to remove the getorgchart logo you need to buy a license http://www.getorgchart.com/Buy
I use the following to temporarily disable eval(), which GetOrgChart uses to keep the logo on display:
<script>__eval__ = eval; eval = function () { };</script>
<script src="getorgchart.js"></script>
<script>eval = __eval__;</script>
I have this html,
<h2 class="more-button">Read More</h2>
and am trying to have it change the position of another div when it is clicked. To accomplish this I am using
$(".more-button").click(function(){
$(".hidden-block").css("right", "110%");
});
FIDDLE : https://jsfiddle.net/wfxxkk3x/
But the code does absolutely nothing. I have tried many different approaches with this problem and nothing seems to work. Any help would be appreciated.
Everything is fine with your code .. In your js fiddle here https://jsfiddle.net/wfxxkk3x/ . You have "hidden-block" as an ID not a Class .
So just change your jquery selector to "#" hash .
Example :
$(".more-button").click(function(){
//hidden-block is an id
$("#hidden-block").css("right", "110%");
});
hope this helps
Change the selector of the hidden-block from a class to an id
$(".more-button").click(function(){
$("#hidden-block").css("right", "110%");});
https://jsfiddle.net/wfxxkk3x/5/
or use animate to animate the div
https://jsfiddle.net/cjon7apg/
What CSS do you have set on your <div class="hidden-block"></div>? Because if you haven't set positioning anywhere, then your "right", "110%" will do nothing.
Try setting position: absolute; or position: relative; on your .hidden-block and that should allow you to move the block around.
If you don't have a stylesheet and you want to go pure jQuery then something like this:
$(".more-button").click(function(){
$(".hidden-block").css({"position":"relative", "right":"110%"});
});
You need to declare the position of the div in order for it to be affected by right
position: relative;
or
position: absolute;
In your fiddle, i notice "hidden-block" is ID not CSS, so your javascript must be:
$("#hidden-block").css("right", "110%");
Then, do you include jQuery? In your fiddle, i didn't notice jQuery library in External Resources.
After changing . to #, and add jQuery, your code works correctly. Try changing 110% to another value and see the result.
I'm currently coding and programming a website using Ruby on Rails but having some issues with a fairly basic element within the page. Basically, my backend system will contain a color that will change each month, that color is then pulled and used throughout the website for multiple elements. This is one of those elements...
I have a div with an image inside that will soon be a link. I want to use JS or JQuery to make this element change it's background color on hover. I know it's simple but, for some reason, I can't figure this out. I'll include a jsfiddle of the entire setup:
HTML:
<div class="contribute_buttons">
<img src="https://s3.amazonaws.com/static-passenger2/images/shop_and_support.png">
</div>
CSS:
.contribute_buttons {
width: 300px;
height: 39px;
float: left;
background-color: #393839;
margin-top: 5px;
margin-bottom: 15px;
}
JAVASCRIPT:
$(document).ready(function() {
var colorOrig=$(".contribute_buttons").css('background');
$(".contribute_buttons").hover(
function() {
//mouse over
$(this).css('background', '#AAEE00')
}, function() {
//mouse out
$(this).css('background', colorOrig)
});
});
http://jsfiddle.net/EQeMs/
Thanks in advance for the help!
You can do this with just CSS using the :hover pseudo-class:
.contribute_buttons:hover {
background-color: #AAEE00;
}
Working Demo
Otherwise, your jQuery is fine. It looks like you just forgot to import jQuery in your jsFiddle example.
Load jQuery in the Frameworks & Extensions menu on the left and this fiddle works fine. $ is the jQuery function and when you see it it means that jQuery is required.
However, unless you're targeting IE below version 7 I would just use the pure CSS solution with :hover
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
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.