Jquery .click not working when changing css properties - javascript

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.

Related

show popover above all elements jquery datatables

I am working on jquery data tables, The issue which I get is that bootstrap popover is hiding below the div, What I want is to show the popover above all elements when I click the action button. Attached image has all computed the code+ screenshot. I have already tried to add z-index to some other value but still, it is not working, Please have a look at it what is happening wrong, Thanks.
Here is the computed CSS (also attached in a screenshot)
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 0;
Image:
Try to check the "overflow" property of the tag around this table. If it has the value "hidden" that may be your problem.
Use the below code:
$('your element').tooltip({ container: 'body' })
As per #Devesh N's answer, try using your table's id instead:
$('.dropdown-menu').tooltip({ container: '#tableId' });

jQuery in Sublime text? Code not working

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

How to change the position of a Tooltip

My requirement is like I need to display the tooltip only at left side, I don't want it to be get displayed at right side. What are the css changes I need to do to achieve this. Please help me on this issue.
Note : I don't want to use any kind of Plugin, to do changes only in html (title)tooltip.
Html
<input type='button' class='sam' id='btnSubmit' value ='submit' title='Click here to submit'/>
CSS
.sam{
width:200px;
margin-left:120px;
margin-top:25px;
}
.sam[title] {
position:fixed;
top:100px;
left:50px;
}
Here I have attached the link that i have tried
JsFiddle Link
This is not possible without a plugin or custom code. You will have to implement a custom tooltip using HTML/CSS and dynamically show it on hover.
By the way: Your CSS-Selector .sam[title] matches every element which has the class "sam" and any title, to select all element with the title "hello" you would have to use this selector: .sam[title=hello]
As Fabio said, it is not possible to change the position of a tooltip. However, I can recommend making your own simply implementing basic JQuery and CSS.
First, make your tooltip in CSS. For example:
#tooltipbox {
min-height: 300px;
max-height: 500px;
width: 500px;
background-color:yellow;
opacity: .6
color: red;
position: fixed;
top: 10px;
right: 100px;
}
After that, you'll need to put it in HTML using a DIV.
<div id="tooltipbox">yourcontent</div>
Next you'll need to make a small jquery script.
$(document).ready(function(){
function toolTipper(myToolTip, objectHover, fadeInTime,fadeOutTime){
$(myToolTip).hide();
$(objectHover).mouseenter(function(){$(myToolTip).show(fadeInTime)};
$(onjectHover).mouseleave(function(){$(myToolTip).hide(fadeOutTime)};
}
toolTipper('#tooltipbox','.objectyouhoverover', 1000, 500)
}
Let me break it down for you. You made a div that has your tool tip text positioned where you want, styled however you want. Then in a script, we hide it so that when they hover over your object, that particular tooltip is then shown. When you leave that object, it disappears as should a tooltip should.
The code is rather simple; however to understand what I did, you'll need to understand basic Javascript and Jquery. I made a function with the parameters you'll need to enter for every tool tip you made. Lets say you made a styled word that needs a definition and therefore requires a tooltip. You first attach a class or ID to it which doesn't need to be defined in your CSS document. You just need it there for the script to find it.
In this sentence, chicken is bold.
Chicken is the object with a unique class of ".chickentooloject".
Next you make a unique tool tip div.
<div id="tooltipbox" class="tooltipbox1"> A chicken is a bird. </div>.
Why did we do this? So we also have a unique tool tip to be found by the script. The rest is up to the script.
toolTipper('.tooltipbox1', '.chickentoolobject', 500, 1000);
The code is untested, but it is simple jquery, so I am positive it'll work. If you're confused, leave a comment and I will help you more.

How to get inline z-index style with jQuery?

Following returns 'auto' instead of 10. Why?
<div class="testclass" style="z-index:10"></div>
<script type="text/javascript">
$(function() {
alert($(".testclass").css("z-index"));
});
</script>
http://jsfiddle.net/kEVq7/50/
Apparently, because the div is not positioned. Make this change to your div's style:
<div class="testclass" style="position:absolute; z-index:10"></div>
And you will 10 in the alert.
This makes sense in that the z-index property doesn't apply to a non-positioned element.
By the way, this further appears to be browser-dependent behavior. Your Fiddle reports 10 under Firefox, but auto under Chrome.
z-index can only be assigned to positioned elements. Try adding:
.testclass {
position:relative;
}
The z-index property can only be applied to elements that have the position absolute, relative or fixed. Since the default property is static you are getting the result auto instead of 10
It must be a bug in Chrome, it works in FireFox.
Just try a vanilla approach
$(function() {
console.log($(".testclass").css("z-index"));
console.log($(".testclass")[0].style.zIndex);
});
http://jsfiddle.net/kEVq7/57/
There is little jQuery use in this, getting the style attribute works cross browser.
It's messy, but you can try this jsFiddle solution. it uses .attr() and .substring to find the value. I'm not quite sure why you cant get the inline value.
http://jsfiddle.net/kEVq7/59/
http://jsfiddle.net/kEVq7/63/
here it is working with vanilla javascript
var x = document.querySelector('.testclass').style.zIndex;
alert(x)
Humm. If you want a n answer I think its a bug but the z-index is correctly set
.testclass {
width: 50px;
height: 50px;
background-color: black;
}
see the demo
CSS z-index property always work with absolute as well as relative positioning value. So you must define position:relative or either position:absolute.
Check this demo jsFiddle
HTML
<div class="testclass" style="position:relative; z-index:10;"></div>
jQuery
$(function() {
alert($(".testclass").css("z-index"));
});
But in your case you can use JavaScript for fast execution in compare of j-Query by using querySelector()
Check this demo jsFiddle
HTML
<div class="testclass" style="position:relative; z-index:10;"></div>
JavaScript
alert(document.querySelector('.testclass').style.zIndex);
Hope this both are help you!

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

Categories