image link - webpage image
I want to remove all the spaces but can't do so.
i also want the sidebar to be of the same height as Content
Thankyou!
I don't know what's wrong with it
should i make a single sidebar instead of 3?
CODE
HTML5 and CSS3 code
http://www.mediafire.com/download/70p421je5uv2a4m/Theme.rar
THank you!!! :D
You can set background for element that contain your sidebar and content:
<div style="background:#fff">
<div id="content"></div>
<div id="sidebar"></div>
</div>
http://codepen.io/Chovanec/pen/hcAmH
In case you want the height of the content responsive, and the sidebar change responsive along with it, you can try a jQuery solution
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$( document ).ready(function() {
var y = $("#content").outerHeight();
$("#sidebar").css({"height": y});
$( window ).resize(function() {
var y = $("#content").outerHeight();
$("#sidebar").css({"height": y});
});
});
</script>
Related
I have on my site, a page with several DIV's with some content (let's say that each one is a TO DO task).
I need to view that page URL and choose which DIV I want to delete permanently (in a way that even if I refresh the page, it won't be there anymore).
Is this possible?
I have this code, but the "deleted" DIV re-apear as soon I refresh the page...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#removeDIVid1").click(function () {
$("#id1").remove();
});
$("#removeDIVid2").click(function () {
$("#id2").remove();
});
$("#removeDIVid3").click(function () {
$("#id3").remove();
});
});
</script>
</head>
<body>
<div id="id1"><p>paragraph 1 <button id="removeDIVid1">Remove DIVid1</button></p></div>
<div id="id2"><p>paragraph 2 <button id="removeDIVid2">Remove DIVid2</button></p></div>
<div id="id3"><p>paragraph 3 <button id="removeDIVid3">Remove DIVid3</button></p></div>
</body>
</html>
The remove method just takes the object out of the DOM, and when you refresh the page, since the DOM tree is generated again, with your div elements. I think generating these tasks dynamically using jQuery will solve your problem. Let me know if you need help with the code.
lets pretend i've a html file - "main.html"
& another html file "content.html"
i want to add content on main. i made the content, where
content's - Width = window.innerWidth || root.clientWidth || body.clientWidth;
Height = window.innerHeight || root.clientHeight || body.clientHeight;
content is absolute.
and i don't know the height width of main.
in main i added in the body part -
& this happen -
enter image description here
here the can is from the content & texts are from the main..
the problem is content appears with its own scroll bar..
what to do...!?
To dynamically load content, you could make an AJAX call using XMLHttpRequest().
In this example a url is passed to the loadPage() function, in which the loaded content is returned.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function loadPage(href)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
}
</script>
</head>
<body>
<div onClick="document.getElementById('bottom').innerHTML =
loadPage('content.html');">Home</div>
<div id="bottom"></div>
</body>
</html>
When the div element containing text of "Home" is clicked, it sets the html of div element with id of "bottom" to content found in the "hello-world.html" document at the same relative location.
content.html
<p>Your content</p>
I am trying to create a back to top button for my website.
what exactly does the following do cause it is not working:
body[data-smooth-scrolling="1"] #to-top {
right: 33px;
}
If you want a simple "to top" functionality, do the following:
1.) Add a target ID to an element on the top of your HTML, like this:
<body>
<div id="ToTopTarget">
content
</div>
</body>
2.) Add an anchor link to target this:
Back To Top
All in all you have this example code:
<body>
<div id="ToTopTarget">
content
</div>
Back To Top
</body>
If you want the functionality of your example described, look at the explanation of Huangism.
Adding to Sebsemillia's answer, adding the following to <head> should animate the scroll to top: (assuming jQuery is loaded)
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[href*="#"]').click(function() {
var anchor = $('#'+this.href.split('#')[1]);
$('html,body').animate({scrollTop: anchor.offset().top},'slow');
return false;
});
});
</script>
How do I change the width of popup.html? I've attempted changing the width of the div in it but that seems to have no effect.
Here is what I've tried...
<div id='poppingup' style = "min-width: 300px; display:none">
Popup width is determined by the visible content, so either make your div visible or apply min-width to body:
body {
min-width:300px;
}
(there is also a limit on max width, I think it is 800px)
I tried to change the width of body too, but it didn't work. You can set the width of html tag:
<html xmlns="http://www.w3.org/1999/xhtml" style="min-width:600px;">
It worked in my project.
Changing the css didn't work for me.
You can do it with javascript:
<script>
window.resizeTo(1920, 768);
</script>
Or if you want to accomodate all screen sizes:
<script>
var newheight = window.height * (5/10);
var newwidth = window.width * (7/10);
window.resizeTo(newheight, newwidth);
</script>
I am pretty sure i seen sites that make firefox (and other browsers?) select text only within a div and not span across other divs. How do i do that
it seems giving overflow: hidden encloses the text selection in that div only.
Hope it helps
source
https://stackoverflow.com/a/5505944/932473
Based on this.
<html>
<head>
<title>No Select!</title>
<script>
window.onload = function() {
document.onselectstart = function() {return false;} // ie
document.onmousedown = function() {return false;} // mozilla
}
</script>
</head>
<body>
Select me!
</body>
</html>
By the way try to avoid this kind of stuff as it's not cool to prevent visitors from their basic rights!! If someone wants to select a text, they'll know how to do it and there's no way to prevent it.