I tried to comment on this question for clarification to what I might need but without enough rep I can't so here we go...
I want change the content of an iframe while targeting an anchor tag to scroll to a certain point lower on the page.
I tried to implement the js on the other page but while it scrolled ok, the iframe content did not change.
Try this example:
<html>
<body>
The frame:
<iframe id="theFrame" src="about:blank" width="90%" height="600"></iframe>
<br />
The link: change frame and scroll to bottom
<br />
<div style="height:600px;background:#8cc">padding...</div>
Bottom of page.
<div id="bottomOfPage"><div><!--this is the marker-->
</body>
</html>
Related
I have a custom built CMS and content looks fine in the WYSIWYG editor, but on the web site front end there are extra br tags that shouldn't be there, I'm wondering if I can hide them using CSS (there is a master.css file)
Here's an example of the problem - note the br tag at the end of each line
<div class="column threequarter">
<h3>I need to hide the break tag at the end of this line and the following line</em></strong> </p><br />
<p> </p><br />
<h4>I need to hide the break tag at the end of this line</h4><br />
<p>I also need to hide the break tag at the end of this line.</p><br />
Trouble is, I don't want to hide ALL br tags throughout the site but if I could just hide them within the then that would probably suffice.
As the HTML documentation in the link https://www.w3schools.com/tags/tag_br.asp says, The <br/> tag also supports the Global Attributes in HTML. You just set a class for the required <br/>tag and then set display:none; for those particular elements. Here is an example,
HTML:
<br class="mystyle" />
CSS:
.mystyle{
display:none;
}
Hi I have a div question,
on my home page I have a menu its in a div. The body has another div. Can I put or somehow call a specific div content from another page into the div of the homepage body when I call for it from my menu. or how can I put the other page inside the body div with out using Iframes. For example:
<html>
<body>
<div>content from the another_page.html div.</div>
or
<div>another_page.html inside here</div>
</body>
Can this be done? Thank you in advance.
You can use jQuery for solving this.
Please refer to this for loading div from another page inside div:
Load content of a div on another page
And for loading another page inside div:
loading html page inside div
You have a number of ways to do this, as commented already, ajax is probably what is used in most cases. However it can also be done using PHP, jQuery, and an HTML object.
Link to similar question: here
You could try this and style it with css
<body>
<iframe src="page1.html">
</iframe>
<iframe src="page2.html">
</iframe>
</body>
I have a webpage that I want to pop-up a description in it. I've used rightJS light box 2.4.0. It works fine but the only problem is that it just shows a portion of my text. I have attached a sample file to check; As you can see it doesn't pop-up the whole text.
Any suggestions?
thanks
this is a sample code:
<!DOCTYPE html>
<html>
<head>
<title>RightJS: Lightbox</title>
<script src="right.js"></script>
<script src="lightbox.js"></script>
</head>
<body>
<div class="lower">
<a href onclick="Lightbox.show($("loremm-block").html()).resize({width:"20em"}); return false;">Link</a>
</div>
<div id="loremm-block" style="display:none;"> a very long text </div>
</body>
If you inspect Lightbox DOM via inspector in Chrome or Firefox you will see that it actually has the whole text inside the Lightbox but rui-lightbox-scroller has
overflow:hidden
CSS rule and it cuts off the text.
Play with width settings of Lightbox or try applying the following CSS rule to this element (rui-lightbox-scroller):
overflow-y:scroll;
The HTML structure is described in Style adjustments section where you can compare the DOM
I tried to do this to insert a few blank lines in my web page (to separate my text from an image displayed through a script) but it didn't work:
<asp:ContentPlaceHolder ID="ContentText" runat="server">
</asp:ContentPlaceHolder>
<p></p><p></p><p></p><p></p><p></p>
<script type="text/javascript"><!--
...
If you have time to explain to me why the series of p's and closing p's didn't work, that'll be great. Otherwise, please just tell me how to insert some space there. Thanks.
Try this
<div style="height: 100px"></div>
You need <br /> which is a line break.
<p> are for paragraphs and will separate any text between the opening and closing tag with any other elements, as they are all empty there is no effect.
Investigate <div> and <span> as there are countless ways to separate elements rather than just a blank line.
Wouln't it be better to use CSS to achieve what you want? If you only need a vertical spacing between your text and your image. I would add a top margin to the image you are inserting throught javascript.
For example:
<asp:ContentPlaceHolder ID="ContentText" runat="server">
Your text is here
</asp:ContentPlaceHolder>
<img src="javascript-inserted-image.jpg" width="100" height="100" style="margin-top: 50px;" />
In real life, I would be using a CSS class that I would assign to the image instead of applying the margin to the style attribute of the image.
Edited:
Your image would also need to be displayed as a block element (CSS style display: block;) if your the content of your place holder is not a block element like a p, div, blockquote, etc...
i am using a slider js named as easySlider1.js for worspress. its working fine but till the time whole page is not fully loaded it show all the images of slider for a moment till the page is not loaded. as soon as page is fully loaded then it working fine.but it seems odd that it show all the images while page is in loading process. so please tell me how can i solve the problem. i want that all the images of slider should not show while page load. i try for it but cannot get the solution.so please tell me how can i solve the problem.
Thanks.
I don't know how the page looks like, but with the information you gave I came up with the following:
If the images are surrounded with a html-tag like div or p, then you can add css to hide the images while loading and show the images when the page is fully loaded.
If you have this:
<html>
<body>
<div id="image_gallery">
<img src="..." />
</div>
...
</body>
Then change it to this:
<html>
<body>
<div id="image_gallery" style="display:none;">
<img src="..." />
</div>
...
<!-- insert script just above the body endtag -->
<script type='text/javascript'>
jQuery('div#image_gallery').show();
</script>
</body>
jQuery must be loaded for this to work.