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>
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.
On my index page there are two links for Login and Signup and one iframe
I have designed both(Login and signup) pages separately
Now i want to force both pages to be opened only in iframe not in a separate tab
and if someone tries to access directly redirect them to index page.
here is my code...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Login Signup
<iframe src="" name="frame" frameborder="0"></iframe>
</body>
</html>
You can add the following to the head of your HTMl document to make it automatically redirect if it is not loaded inside an iframe:
<script>
window.onload = function(){
if (top === self) {
//not inside iframe
location = 'url';
}
}
</script>
JSFiddle: http://jsfiddle.net/xjqyrsd7/
I just found the Best way to do it with Javascript..
var myUrl = 'http://localhost/test/index.php';
if(window.top.location.href !== myUrl) {
window.top.location.href = myUrl;
}
I have a page that I work on daily and I need to look through the page for text that has HTML of:
<tr style="background-color:#33FF00">
How can I use CSS to auto navigate to that color or HTML code when the page loads?
Is there a way?
I cannot edit the html as it's not hosted locally and I don't have access to write access, only read.
I am currently using Stylebot to modify the css for my own display purposes and want to know if I can do the same to auto navigate to that colored section.
If there is a way similar to using style bot but for HTML like userscripts etc, I am not familiar enough so if you have a workaround any tutorial would be great to show me how to implement it.
Thanks!
UPDATED
Copy and paste the code below into a text file and save it as an html file. Then open it in a browser.
This code loads the target page from the host into the 'result' element, then uses some post-load javascript to navigate to the colored tr elements. If the page requires scripts on external stylesheets, etc., these need to be loaded explicitly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$(document).ready(function(){
var sourceUrl='https://en.wikipedia.org/wiki/Main_Page';
var sourceScript='https://en.wikipedia.org/wiki/Main_Page';
$( "#result" ).load(sourceUrl, function() {
$.getScript(sourceScript, function(){
alert("Script loaded and executed.");
});
$('html, body').animate({
scrollTop: $('tr').filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
});
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
from jQuery scroll to element
and JQuery Find Elements By Background-Color
UPDATE 2
Or, in an iFrame (but only works if you are on the same domain as the target page)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onLoadHandler(){
var $iframe = $("#result").contents();
var trs=$iframe.find('tr');
$iframe.find('html,body').animate({
scrollTop: trs.filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
};
</script>
</head>
<body>
<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>
</body>
</html>
UPDATE 3
If none of these work, try: 1) load your page in a browser, 2) open Developer Tools, 3) go to the Page Inspector or Elements tab, 3) Ctrl-F and search for your color string ('#ddcef2'), 4) right-click the first highlighted element in your search results and select "Scroll into view"
Try and see if that does the trick:
* {
display: none
}
[style*=background-color:#33FF00] {
display: table-row
}
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>
I have a HTML page that is in rtl with the following code and Google plus one button does not appear good in pages.
Until the plusone.js file loaded there is a very big horizontal scroll because of dir="rtl" in html tag.
After loading plusone.js the scroll will disappear.
how can i avoid appear and disappear of this horizontal scroll.(I don't want to remove dir="rtl" from tag)
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</head>
<body>
<div id="content">
<div class="g-plusone" data-size="small" data-annotation="none"></div>
</div>
</body>
</html>
I just fixed this for my site
my problem was that every article page in my site had a horizontal scroll bar.
after a long investigation i found that Google plus one button has a bug
this bug is visible only when the page uses Direction=rtl style.
how to fix
as long as the bug is relevant (hopefully google will fix it soon) just add this to you'r css file
iframe[id^="oauth2relay"]
{
right:100px;
}
this will restore the correct position for the page for any iframe that called "oauth2relay" (google plus one script)
i'm using it in my site in every article page - you can check it out - just search "oauth2relay" in any article using firebug
my site is www.mentallica.co.il
article for example: example
The script does not allow you to change elements
But there is a simple solution
Instead, set the dir = "rtl" to the html or body to do this set for a main div
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</head>
<body>
<div id="content" style="direction: rtl;">
<div class="g-plusone" data-size="small" data-annotation="none"></div>
</div>
</body>
</html>
Add this css to your css file, this code is work for me
iframe[id^="oauth2relay"] { position: fixed !important; }
This bug is now fixed in the Google+ Javascript. You should no longer need to make any changes to get things to work properly.