style not showing up [closed] - javascript

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 am building an expandable grid portfolio but the styles for the .showcase <a> tag and <p> tag are not showing up. I am not sure why. I think it has something to do with .html() not grabbing the <a> and <p> selector but just the content inside it. Though this does not happen to the <img> tag. I am a little baffled. Here is my jsfiddle
http://jsfiddle.net/theMugician/L2xyatfd/38/
Hey everyone I figured out what my problem was. I was calling html() twice which makes a lot of sense now. In the variables $aTag and $html I didn't need to call the html() because I was going to call it again in the .showcase div.
var $aTag = $a.eq($item.data('rel'));
var $html = $p.eq($item.data('rel'));
<!---.showcase div--->
$link.html($aTag).show(0);
$details.html($picture).show(0);
Here is the new fiddle
http://jsfiddle.net/theMugician/L2xyatfd/47/

Simply try :
var $aTag = $a.eq($item.data('rel'));
var $html = $p.eq($item.data('rel'));
$link.append($aTag).show(0);
$images.append($picture).show(0);
It will wrap the element, not just its html content

Related

Get the height of a div using Javascript [closed]

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 months ago.
Improve this question
When I type
console.log(document.getElementById('kitHeight').offsetHeight);
It prints 30 on the console, which is wrong.
But, when I type the same using developer console, it gives me 65, this is correct.
The height of the div is 65px.
Kindly help me why this behaves like it does and how to get 65px as the correct answer using javascript
#CBroe already told you that the information you are offering is too little to help you.
But it might be the case, that you are trying to run the script before the DOM actually rendered the div. See this example:
<script>
console.log(document.getElementById("class").offsetHeight);
//Errors
</script>
<div id="class"></div>
<script>
console.log(document.getElementById("class").offsetHeight);
//Returns: 0
</script>
<script>
const i = document.getElementById("class");
i.innerHTML = "John Doe";
console.log(document.getElementById("class").offsetHeight);
//Return: 19
</script>
The second and third pieces of code will return the height. The first one will error because the div is not in the DOM yet. The third one will return an updated size from dynamic content.

javascript - clone DOM body without script tags [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am developing a chrome extension in which I need to clone the body tag-childrens. (a clone - so that the elements does not get updated when the DOM changes). And Re-append them to the body tag, without the script tags.
I am doing this to avoid the script tags for executing.
The problem is that I don't want script tags cloned along with the other elements in the body. I read that using regex to filter/search for stuff in the html is general not a good idea.
How can I accomplish my goals, what are my options?
A vanilla javascript approach might look like the following.
var div = document.createElement('div');
div.innerHTML = document.body.innerHTML;
div.querySelectorAll('script').forEach(function(scriptTag) {
scriptTag.parentNode.removeChild(scriptTag);
});
document.body.innerHTML = div.innerHTML;
<div>
A div
</div>
<script>
console.log('hi');
</script>
<p>
A paragraph
</p>
Using jQuery you could try something like:
var $clone = $('<div>').append($('body').html())
$clone.find('script').remove()
Then when you want to replace:
$('body').html($clone.html())
Note that all event listeners will be lost with this approach

Javascript search form on div contents [closed]

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/

how to change the contents inside <a> tag into image field using css? [closed]

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.

Get parent div id of second javascript? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have a div which is like this:
<div id="mainDiv">
<script>
javascript here...
</script>
</div>
I basically want to get the ID of the div it is inside.
I have tried using jQuery and classic javascript to do this but it keeps returning undefined.
Does anyone have any idea's? Thanks
Since broswer read the code from up to down, you can do this:
Vanilla JS
var scriptTags = document.getElementsByTagName('script');
var id = scriptTags[scriptTags.length - 1].parentNode.id;
jQuery
var id = $('script').last().parent().prop('id');
when it will read this code, the last script tag is the one the browser is reading.
Here's a fiddle : http://jsfiddle.net/nb234/
Check this out http://jsfiddle.net/78N9A/1/
<div id="parent">
<script id="scr">
function show()
{
alert('hello');
}
</script>
</div>
window.onload = function(){
var ele = document.getElementById('scr').parentNode;
alert(ele.id);
}
<script id="script">
Then
$('#script').parent();
If I understand correctly, you are saying that the id on the parent div is unknown in advance, and you want to use JS to determine what it is.
If you can't edit the script tag to add an id, maybe you could do a document.write() within that block to add in a little hidden element, then you can test to see what that element's parent is.
http://jsfiddle.net/AtRYF/
JAVASCRIPT:
Give your script an ID and then use parentNode to move up the DOM.
var the_div_you_want = document.getElementById("skript").parentNode.id;
JQUERY:
Pretty sure .parent() is what you're after
$('#scriptId').parent().attr("id");
Regardless, you need to find some way to locate the script and the move up the dom to find that relationship. Hope this helps.
http://jsfiddle.net/Zbuf8/1/
jQuery(document).ready(function($) {
$('div').attr('id');
});
should get you the value you need.

Categories

Resources