Ok so I have fairly simple thing but something is not working properly.
The first thing I have is a couple of <input /> buttons and what I want is to set automatically width for each button wrap.
For some reason whatever I try I get the value 0 [3x]. For example something like this...
$('.button_holder .proceed').each(function() {
console.log( parseInt( $(this).outerWidth() ) );
});
The console.log gives me "0".
Here's a fiddle for a preview and it works there... Quite odd.
JS Fiddle Example
I don't understand why, any tips ?
EDIT 1:
My project has #container set to display: none and JS does some fadeIn effect. Removed that and it appears that it is working properly now.
Any ideas why and how to make it work with fadeIn() of container ?
When the element is set to display:none the element is technically not present on the page. So the width will be 0.. If you want it to work write your code in the callback of fadein
$('#container').fadeIn( 300, function() {
$('.button_holder .proceed').each(function() {
console.log( parseInt( $(this).outerWidth(), 10 ) );
});
});
So after the container is visible on the page, which is in the callback function , iterate over the elements and it should work fine.
And don't forget to add the radix parameter when you use parseint
Related
I have a DIV that needs to be displayed/hide whenever i hover a menu item.
Here it is my website: Website
The Blug light section should be displayed only when I hover the Photo Booths menu on the header.
I have tried the following code on JSFiddle which it works but when i use it on my site it doesn't work
<script>
let test = document.getElementByClassName(".menu-item.menu-item-7912");
test.addEventListener("mouseover", function( event ) {
document.getElementById('test2').style.display = 'none';
});
test.addEventListener("mouseleave", function( event ) {
document.getElementById('mega-menu-customized').style.display = 'block';
});
</script>
I have tried using getElementByClassName but without success. Any ideas of how to make it work?
Are you getting DOM node in test variable, one problem I can see in your code is:
let test = document.getElementsByClassName(".menu-item.menu-item-7912");
Should be:
let test = document.getElementsByClassName("menu-item, menu-item-7912");
We do not use dot before class name and multiple classes can be separated by comma like:
let test = document.getElementsByClassName("class1, class2, class3");
Your issue is in the header element. On scroll, the style property of the document header is changing. Look:
sorry for the bad quality, upload size is maxed at 2MB
Without getting into too much detail, one thing that I see is that the height of the header is being reduced to only contain the main header. When the larger blue subheader is visible, part of that is because the style.height of the header is made to be much larger. Additionally, the first child of the header is a div with id 7905, and that seems to be what you need to target to modify the opacity of the larger blue header. You need to target that div:
const blueBannerContainer = document.getElementById('7905')
But your event handlers will also need to account for the height of the header element. display: block won't really help you here.
I just need some advice and help. I have 7 different divs and every div should do something else when clicking on it (owl carrousel).
Now i just have everything "hard coded" but that is not very efficiënt
Example:
when i click div 1: $(".div1").css('-webkit-filter','blur(5px)');
when i click div 2: $(".div2").css('-webkit-filter','grayscale(100%');
etc.
Do i need to keep "hard coded" or is there a better solution for my question?.
I am a real newbie.
Thanks in advance
Try doing something like:
/* Array of effects */
var effectArray = ['blur(5px)', 'grayscale("100%")'];
$(".divClass").click(function () {
// Wrap the clicked item in jQuery.
// .index() get its index 0 to "n".
$(this).css('-webkit-filter', effectArray[$(this).index()]);
});
EDIT i forgot to wrap the divclass in jQuery. you can obviously do this without jQuery too
Also just realized you want it on click.
Never used JavaScript Before and I'm trying to fix this form in share point.
I want this text box to be small (like 1 row), until the user clicks it and then it should expand into a larger text box with like 10 rows. I apologize if this has been answered before, I don't even know what I should be looking for. Here is code I have that doesn't work, but does pop up an error message(I did not write this code):
alert(DescriptionID);
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){
document.getElementById(DescriptionID).rows= "10";
});
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){
document.getElementById(DescriptionID).rows= "1";
});
EDIT:
Here is what the current code will display:
EDIT2:
Thanks to a ton of help from you guys/gals I am close to finished! I can now understand it significantly better at least! Here is a picture of the code. The object is actually an "ms-formbody" ???
AND ANOTHER EDIT:
So here is the error i'm getting after using Johhny's code:
If you are using jQuery, this might work for you:
HTML:
<textarea id="expandingTextarea" rows="1">Enter Text</textarea>
JavaScript:
$(document).ready(function() {
$('#expandingTextarea').on('mouseover', function() {
$(this).attr('rows', '10');
});
$('#expandingTextarea').on('mouseout', function() {
$(this).attr('rows', '1');
});
});
I created an example here.
Update:
Using a click event to change/toggle to row count:
$(document).ready(function() {
$('#expandingTextarea').on('click', toggleExpand);
function toggleExpand() {
var oldRowCount = $(this).attr('rows');
var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1;
$(this).attr('rows', newRowCount);
}
});
Demo here.
In fact, you don't need JS to achieve what you want. CSS can do it for you.
<!--html-->
<textarea class="descr">This is description</textarea>
/*css*/
.descr {height: 20px;}
.descr:hover, .descr:focus {height: 120px;}
alter the height instead of the "rows" property.
open up the page in chrome, open the developer tools (View->Developer->Developer Tools) and then use "inspect" to select the text area you want to manipulate.
try playing around with the css of that element. then, write your javascript to change just the property that you want.
https://developer.chrome.com/devtools
The code you showed looks fine but DescriptionID should contain the ID of the description box. You can check what it is by right clicking on the description form and clicking "inspect element". Then assign var DescriptionID = "someID" at the beginning of the code.
Also, you might consider altering the height, not the rows.
If the form doesn't have an ID, look for an option to change the HTML and add one. If you don't have such an option, it's still possible to achieve what you want to do but you have to look beyond getElementById.
I am trying to access my own javascript function from within a:
$("body").on("mouseenter",".noteNode",function(){});
The trouble seems to be that when I am inside the function above jQuery will not allow me to get access to other elements?
Let me elaborate further:
Actual code I want to use I've jsfiddled: http://jsfiddle.net/uJ2Yb/8/
I believe the function is being called as I had wanted it to be, but as you can see $(this) is not able to target the actual div which is being hovered, and so when trying to pass this data to the other function it just doesn't arrive - why is this? I believe it's a scope problem but I have tried a few ways to solve it and searched S.O without much luck yet.
The reason I need to use $("body").on is because I am creating the DIV's (which will be hovered) on the fly with JS.
As you can see the hover function is working fine and firing as it should do, but totally unable to access anything in the DOM which I don't understand
.
[Edit] so to clarify: http://jsfiddle.net/uJ2Yb/8/
I am trying to pass the ID of the DIV (which was created BY JS) over to my own function in which i want to try and access the DIVs offset parameter - but i am unable to do so, you will see in my revised fiddle that i am just getting 'undefined' in my alert box which is not what i wanted - i am still convinced that this is because of a scope issue.
try this updated fiddle: http://jsfiddle.net/uJ2Yb/7/
function myFunction(someVar){ alert(someVar); }
$("body").on("mouseenter",".noteNode",function(event){
myFunction(event.target.innerHTML );
//alert( event.target.innerHTML );
});
Please Assign Unique Id To Your Divs
try This Code
function myFunction(someVar){ alert(someVar); }
$(document).ready(function(){
$("body").append('<div class="noteNode" id="a">Note Node</div>');
$("body").append('<div class="noteNode" id="b">Note Node</div>');
$("body").append('<div class="noteNode" id="c">Note Node</div>');
});
$("body").on("mouseenter",".noteNode",function(){
myFunction( $(this).attr("id") );
alert( $(this).attr("id") );
});
Below I have this piece of code which I use to filter products with using a drop-down menu. The content of the #child_cat division changes based on the value attribute of the anchor tag:
$('#brandsort').change(function(){
$('#child_cat a').fadeOut(500);
$('[value="' + $(this).val() + '"]').fadeIn();
if ($('#brandsort option:selected').text() === "") {
$('#child_cat a').fadeIn(500);
}
});
The code will filter out the products that do not match their option value, but it won't play the animation. Right now, it acts more like a delayed .show() / .hide() function than anything. Please enlighten me from any wrongdoing in my code or what I could possibly be doing wrong aside from that.
EDIT:
I know the people on SO would normally like some hands-on help from one of you, but in this case I was specifically only asking for "enlightenment". Just some verbal input of what I could have been doing wrong.
To fulfill your request of providing some HTML, you'll find it here: http://jsfiddle.net/HJPN8/3/
There was a few mistakes in the logic that made this not work. Firstly, the reason you couldn't see the fade animate happen is because fade uses the css property opacity. Opacity only works on block and inline-block elements, and you were using the .fadeOut() on a tags which are display:inline. So that can be fixed easily with this:
#child_cat a{
display:block;
}
Next you're using .fadeOut() and .fadeIn() which both run at the same time meaning that the animations would both collide and not work properly. So you need to use callback functions to correctly time them. Below is the code I have refactored, I've included a lot of comments so you can see how it all works. The fade functions have been replaced with .animate() which is a lower end function that gives you more control which we need in this situation.
One last thing is that you were using the value attribute on your products, this isn't recommended as this property is specific to the options tag. If you wish to create custom attributes then the standard way is to prepend them with "data-" which you can see I've done here: http://jsfiddle.net/HJPN8/6/
$(function(){
var brandsort = $('#brandsort');
var products = $('#child_cat a');
brandsort.on('change', function(e){
var val = brandsort.val();
// If search is blank then select all products to show else filter specific products.
var filteredProducts = (val == '') ? products : products.filter('[data-value="' + val + '"]');
// Hide products and set callback for when the animation has finished.
// If we don't use a callback, the products will animate out and in at the same time, ruining the effect.
products.animate({opacity: 0}, 300).promise().done(function(){
// Now that he products' opacity is 0, we set them to display block to remove them from the flow of the DOM.
products.css({display: 'none'});
// Now Bring the filtered products back and animate them in again.
filteredProducts.css({display: 'block'}).animate({opacity: 1}, 500);
});
});
});