Hi there i have iframe in which there is a div and inside div there is one span
<iframe id="rFrame">
<div id="resarcbTabBox">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus <span id="highLightYellow">PageMaker</span> including versions of Lorem Ipsum
</div>
</iframe>
The content inside div is huge, but i pasted just small. The iframe is vertically scrollable, what i am trying to do is, i just want to scroll to the <span> position.
I am using jquery.scrollTo.min.js.
So far i tried various code but no luck, here are some of my effort, but not luck
$("#rFrame").scrollTo("#highLightYellow", 10);
$('#rFrame').contents().find('#resarcbTabBox').scrollTo("span#highLightYellow", 10);
will anybody put me on right track, what mistake i am making.
Thanks in advance.
Fiddle : https://jsfiddle.net/vivekSalve/orLvgf8n/2/
Related
I'd like to know if it's possible to auto-scroll when I'm clicking on my nav bar title right to a specific part of my page? Is it possible without using jQuery?
Very much possible without the use of Javascript or Jquery. I've created a basic version of the behavior you're looking for. This is possible using ids in your HTML. Please see the example.
a {
font-size: 10rem;
}
html {
scroll-behavior: smooth;
}
<div class="container">
<!-- potential navbar component -->
About<br>
<img src="https://dummyimage.com/1500/000/fff&text=I'm+a+dumb+image+simply+for+scroll+behavior.">
<h1 id="about">About</h1> <!-- goes to this spot of page because of id -->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<img src="https://dummyimage.com/1500/000/fff&text=I'm+a+dumb+image+simply+for+scroll+behavior.">
</div>
I have a header and a block of text under it. I want the header and the first three sentences to avoid a page break, using the css property page-break-inner: avoid. Then I want the rest of the sentences to continue as usual.
I've written the following code but the sentences after the first 3 are starting on a new line, because I've set the span containing the header and the first three sentences as display: inline-block. I would set that span as display: inline but I read somewhere that page-break-inside won't work on inline elements.
.avoid-break {
page-break-inside: avoid;
}
span.avoid-break {
display: inline-block;
}
<span class="avoid-break">
<div>Subtite</div>
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span>
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
A css solution:
remove span.avaoid-break
This is very specific to the code displayed, I would not use this in a production environment.
var spans = document.getElementsByTagName('span');
spans[1].innerHTML += spans[2].innerHTML
spans[2].remove()
IDs will make this much more usable:
<span class="avoid-break">
<div>Subtite</div>
<span id="text-box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span id="extra-text">
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
Javascript:
var textbox = document.getElementById('text-box');
var extratext = document.getElementById('extra-text');
textbox.innerHTML += extratext.innerHTML;
extratext.remove()
I know, title might looks unclear, but I will try to explain what problem do I have. I have 2 divs, one high and one quite small in comparisson with the first one. First one is going to take 100% of the site's width so it's going to be visible the whole time. The thing is I want to see the 2. one. I want it to be kinda sticky. Here are pictures that I've made with my impressive skills :)
Those are situations that I want to achieve:
And this is situation I want to avoid:
If my goal is still unclear just let me know :)
Edit:
Here's demo of my code:
FIDDLE
<div class="row">
<div class="col-xs-4 long">
long
</div>
<div class="col-xs-8 short">
<div class="row">
<div class="col-xs-12 col-sm-6 shortLeft">
short left
</div>
<div class="col-xs-12 col-sm-6 shortRight">
short right
</div>
</div>
</div>
</div>
.long{
height: 1000px;
background-color: red;
}
.shortLeft{
background-color: green;
height:50px;
}
.shortRight{
background-color: blue;
height:50px;
}
.short{
border: 5px solid yellow;
}
Let's say your screen height is 75px. On wide screen position fixed works because 50px is less than 75 so you can see whole content. But with narrow screen you loose some content - position fixed is not the solution :(
You will need to apply position:fixed to the short div or the green div so that it always stays in front when you scroll. From what i understood, i made a sample to show you how position:fixed works. You can make changes in the div's class to change to what you want if i did not define the dimensions properly. Run the snippet to check.
body {
border: 2px solid black;
background-color:yellow;
margin:0px;
padding:0px;
}
.short {
border: 2px solid green;
width:74%; /*removed 1% due to the border widths*/
position:fixed;
right:0;
background-color:gray;
max-height:150px; /*fix the height of the short div so that it does to extend in height on small screens*/
overflow:auto; /*to have scroll in the short div content if height of the content exceeds the max height*/
}
.long {
border: 2px solid red;
width:25%;
background-color:white;
}
<body>
<div class="short">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="long">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
[EDIT]
I have updated the code. Check now. You have to fix the height of the short div and make it's content to scroll if it exceeds that height. that way the div remains fixed while able to scroll the content in and it does not hide the other page items on small screens. Hope this helps.
Hope this helps.
As I have read from a website, I try to wrap a paragraph text around a image. Am a newbie to html!!! I think this must be a small correction in the code.
But I am failed to do that..
<div style="width: 100%; float: left;">
<img src="http://www.postalwebplus.com/yahoo_site_admin/assets/images/Passport-Photo.300110653_std.jpg" alt="left" width="150px" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
How to get rid off this?
thank you for helping!!!
I want the text should wrap exactly some thing like this.
Add align="left" to your image.
<div style="width: 100%; float: left;">
<img src="http://www.postalwebplus.com/yahoo_site_admin/assets/images/Passport-Photo.300110653_std.jpg" align="left" width="150px" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
You have added alt =left ..function of alt attribute is to display some alternate text in absense of the image. other than that you adjust need to adjust your image to left or right as you need.
<div style="width: 100%; float: left;">
<img src="http://www.postalwebplus.com/yahoo_site_admin/assets/images/Passport-Photo.300110653_std.jpg" alt="left" align="right" width="150px" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
I have implemented a section with scroll bar which will display the description. its working fine now. but its having the default style now. i want to custom style the scroll bar so that it will look good.
HTML CODE
<div class="desc" style="width:100px; height:300px; overflow: auto; background:#CCC;" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
You can use slim scroll plugin for this http://rocha.la/jQuery-slimScroll.
CSS scrollbar properties are available to customize it. E.g.:
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
Detailed answers is available at:
CSS customized scroll bar in div