Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 days ago.
Improve this question
I want to create a function that will add some css properties like class or text color (in JS code) to an html element. I don't want to do it in css stylesheet, I'd like to try in JS. The other thing is that I don't want to specify the html element.
I have this code but it doesn't seem working. What is wrong here? Thanks!
function addCss(node) { node.classList.add("class1"), node.color = "blue", };
you need to use the style property to set the color property.as node.style.color = "blue"; and There's an extra comma between statements and you meed to check node parameter is actually an HTML element that you can modify. You can do this by checking that node.nodeType === 1.
function addCss(node) {
if (node.nodeType === 1) {
node.classList.add("class1");
node.style.color = "blue";
}
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I've been working on a project and I have everything functional on the page, minus one little set back. When I open the edit profile form there is 28 blank spaces before the name and title, while there is also 24 spaces after. If I delete all the text and spaces then my placeholder text will appear in the correct spot. My add element popup works with no issues. I have been combing over my code to see if I have any extra spaces that could be doing this and I still can't find anything. Any help would be appreciated.
https://gbolton1989.github.io/web_project_4/
The issue is in your javascript file index.js
editButton.addEventListener("click", () => {
if (!editProfileModalWindow.classList.contains("popup_is")) {
nameInput.value = profileName.textContent;
aboutInput.value = profileSubname.textContent;
}
toggleModalWindow(editProfileModalWindow);
})
The textContent property gets the content of all elements, not just the text (see more here). Because your element has a <h1> element child, you are getting the extra space.
To fix this, you can either:
Use the innerText property instead of textContent which only gets the human readable text
Make the profileName variable refer to the h1 element rather than it's parent. Then textContent will work properly
Examples:
editButton.addEventListener("click", () => {
if (!editProfileModalWindow.classList.contains("popup_is")) {
nameInput.value = profileName.innerText;
// or
// nameInput.value = profileName.children[0].textContent
aboutInput.value = profileSubname.innerText;
}
toggleModalWindow(editProfileModalWindow);
})
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
function change_width() {
$('#cont').toggle(function(){
$('#cont').animate({marginLeft:'0%'});
},function(){
$('#cont').animate({marginLeft:'18.4%'});
});
}
I have the following code here, and it should work but it doesn't. Instead it's affecting the display attribute, making it display: none. Why is it doing this?
Since toggle(function, function) is deprecated a simple way is toggle a class and check for that class
function change_width() {
var $cont = $('#cont');
$cont.animate({
marginLeft: $cont.hasClass('inset') ? '0%' : '18.4%'
}).toggleClass('inset');
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So I have a 'form search' function script that I am trying to apply to items within a container. I have found this from a tutorial online that someone used to search members of teaching staff. only I am looking to apply this to my div classes:
$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', function(e){
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
$('div.dress-container .bold').each(function(){
var $this = $(this);
if($this.text().toLowerCase().indexOf(query) === -1)
$this.closest('div.dress-container').fadeOut();
else $this.closest('div.dress-container').fadeIn();
});
});
Here is the jsfiddle - I was trying to pull the image and text using the JS and class but it would not work:
http://jsfiddle.net/lmac1/x6kv91qk/
Can anyone point me in the right direction? I was using this JQuery hide all divs except for the divs I search for
The problem is that your <div class="dress-container"> is currently wrapping all of your products, therefore you keep on hiding all of them once you use the searchbar.
I fixed your html markup here and removed the <div class="row"> so they line up nicely when you have filtered them:
http://jsfiddle.net/j7c4kdy3/3/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
For some strange reason this simple click function I've added, which should be adding the 'big' class to the clicked divs, is only working for every other div.
See an example here (click the square boxes with images)
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
Here is a fiddle but I chose not to post this as it works fine as it should do. The error is caused by some other element but I don't know what
http://jsfiddle.net/Ly1bxswq/1/
You binding your click handler within a loop, but need to do it only once when all elements added to page.
$.each(data.feed.entry, function (i, entry) {
// ...
$container.append(item);
// ...
})
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
}
As pointed out by #Yan Brunet's comment, it would be much better to delegate the event from every .box to their parent. That way you can bind your handler at any point (even before .box elements are added to page)
$container.on("click", ".box", function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
(-)
I need to replace the (-) by an image
How can I achieve this using css in drupal?
I'll assume that by "replace" you mean to add an image inside an <a> tag through css only.
Yes, it is possible. You can use Css Pseudo Elements. Something like:
a:before {
content: url('img.jpg');
}
Sample JsFiddle
Or, if you really want to "replace" it, you can use a simple Javascript approach:
var element = document.getElementById('anchor_id'); //Or whichever DOM select method you want.
element.innerHTML = "<img src='img.jpg' />";
And, if you still wants something more robust, you can use document.createElement to create the image element, and then .appendChild() to place it inside the anchor.
There are endless solutions... :)
Here is a more robust solution to supplement #LcSalazer solution
var a = document.getElementsByClassName('facetapi-zero-results');
var arr = Array.prototype.slice.call( a )
arr.forEach(function (item) {
if ( item.innerHTML == "(-)" ) {
item.innerHTML = "<img src='http://placehold.it/300x300'>"
}
})
To me it seems like you're trying to do this:
<img src = "yourimage.png"/>
This wraps the image in a link.