I copied a div col2 from index.html to my current div colabout2 first. Then, I want to change the height of the div colabout2 according to the div colabout1 in the same page. However, the following code doesn't work:
'<div id="colabout2">
<script type="text/javascript">
$('#colabout2').load('index.html #col2');
</script>
</div>
<script>
var h = $('#colabout1').height();
$('#colabout2').height(h);
</script>'
Please help. Thx.
Try this:
$('#colabout2').css("height", $('#colabout1').height());
Explanation:
Use the .css() function to configure and objects CSS then get colabout1's height and set it as the second parameter of the .css() function and set "height" as the first.
Use .css for changing style of the element. For example $('#colabout').css('height',h);
Related
There's an img element being created somehow on this page that I can't figure out how to target. It's generated by a script I don't have access to so I can't just delete it.
There are no ID or class attributed to it so I can't apply CSS (that I know of). The source link also changes for other article pages so I can't reference the URL either.
Is there anyway I can target or just hide it? It's creating extra white space at the bottom of the page.
http://support.spacejump.co.nz/support/solutions/articles/27000068245-payment-methods
There are two ways depending upon the possibilities on your website.
1: I suppose there will be no img tag directly inside the body tag if you code properly and put it inside a div or any other tag. So, for this solution is:
body > img {display: none;}
2: If first is not the case and the image will always come after the script tag. Then this also is the solution:
body > script + img {display: none;}
BTW, both are working in your situation.
Right click on the page and view source. You can see the element present int the page source. Delete it in the source code in line 551.
If the image src attribute is guaranteed to be consistent over time, then you can target it by that attribute, and remove it.
document
.querySelector('img[src="/support/solutions/articles/27000068245-payment-methods/hit"]')
.remove()
Here is a JS solution to target the last class in the page before all those JS src CDNs... As it seems the IMG tag is after a bunch of JS tags with the very last element in your page being the layout class, so we create a helper function that gets the siblings of the target element, then we loop over the array returned by the function and set an index, then check the tag.tagName === 'IMG' and check our iterated index => i is higher than the set index, if we get a match, remove that element from the DOM.
const removeImg = document.querySelector('.layout')
const body = document.body
function getAllSiblings(element, parent) {
const children = [...parent.children];
return children.filter(child => child !== element);
}
function removeImageAfterElement(el) {
let index = 0;
getAllSiblings(removeImg, body).forEach((tag, i) => {
tag.classList.contains(el) ? index = i : null
tag.tagName === "IMG" && i > index ? tag.remove() : null
})
}
removeImageAfterElement(removeImg)
<body>
<div class="another-class"></div>
<div class="layout layout--anonymous">
some text and page content
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/package#version/file"></script>
<script src="https://unpkg.com/#freshworks/freshdesk/dist/freshdesk.js"></script>
<script></script>
<script type="text/javascript"></script>
<img src="/support/solutions/articles/27.............../hit">
</body>
I use Twitter Bootstrap's input-prepend class with <textarea>. When I set <textarea>'s number of rows = 1, all looks fine. But when I set it to any bigger value, element becomes larger than input-prepend span.
This is the demonstration: http://jsfiddle.net/2smRF/
How to set the span's height to <textarea>'s height? Can it be achieved using only CSS or I need to use JavaScript?
I don't think this would be easily achieved only with CSS, so I threw together a script for you. Please note that it will not work if the user resizes the textarea.
var onRes = function(){
$('.input-prepend').each(function(){
var $textarea = $(this).find('textarea');
var $span = $(this).find('span.add-on:eq(0)');
console.log($span);
$span.height($textarea.outerHeight()-(parseInt($span.css('padding-top'))+parseInt($span.css('padding-bottom'))+parseInt($span.css('margin-top'))+parseInt($span.css('margin-bottom'))+(parseInt($span.css('border-width'))*2)));
});
};
$(window).resize(onRes);
onRes();
JSFIDDLE
how to change properties of a parent div on hover of child div.
can it be done with pure css ?
html:
<div class="parent">
<div class="child">
</div>
</div>
css:
.parent{width:200px;height:100px;background:#cccccc;}
.child{width:200px;height:100px;background:transparent;}
Not with plain CSS you need some form of script to notify the parent that the child is being hovered(eg.):
<div id="parentId" class="parent">
<div id="childId" onmouseover="doOnMouseOver()" onmouseout="doOnMouseOut()" class="child">
</div>
</div>
<script type="text/javascript">
function doOnMouseOver() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class') + 'child-beeing-hovered';
parentNode.setAttribute('class', parentClass);
}
function doOnMouseOut() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class').replace('child-beeing-hovered', '');
parentNode.setAttribute('class', parentClass);
}
</script>
Note that I've added ids to your html elements so that I can get a hold of them with javascript without making the code unnecessary complex nor using a third party library like jQuery.
Note that you need also to bind onmouseout or otherwise the parent element will keep the new class child-beeing-hovered.
jQuery actually makes your job easier but you should try doing this with javascript at least once.
I hope it helps.
Is there a reason you do not want to use JavaScript or JQuery?
You could simply:
$("#child_id").hover(function (){
$(this).parent("div").addClass("some-class")
});
There is no parent selector in CSS.
You can find quite good explanation why it's not supported here: http://snook.ca/archives/html_and_css/css-parent-selectors
Can someone please guide me how to get an image full screen so that it stays in the centre both horizontal and vertical like the link provided.
http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
I'm only after the background bit and i need the image in a div apposed to in the css like in the example as i am using it for a slider in wordpress.
In order to make your LayerSlider display at 100% height and width, leave the "Slider height" attribute in "Slider Settings" blank, and then use a script like the following to set the height:
<script type="text/javascript">
function resize()
{
var heights = window.innerHeight;
document.getElementById("layerslider_1").style.height = heights + "px";
}
resize();
window.onresize = function() {
resize();
};
</script>
Insert the script into your footer.php file before the closing body tag. If your slider ID isn't number 1, then change "layerslider_1" to the correct ID.
you can add style to the div element
<div style="background: url(images/xyz.jpg) no-repeat center center fixed;">...</div>
I just took the css from your sample page and copy/pasted!
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.