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
Related
I have a very simple webpage.
<html>
<head>
<title/>
</head>
<body>
<h1>hello</h1>
</body>
</html>
breaks my webpage ,both in Chrome and Firefox
the issue is with self-closing Title tag ,removing TITLE tag or adding a title fix the issue
<title>Test Page</title>
Whats the issues with self-closing TITLE tags , couldn't find any reference to say its invalid
If you have a void element:
<img />
<br />
Then they have no content, because there's nowhere to put it. Images can be thought of as an empty <div> with a background image.
Compared to these elements:
<h1>Hello</h1>
<section>World</section>
Which actually contain stuff (in this case, text).
The reason that the <title/> breaks your page is because you need a title in a webpage - if you don't have one, it'll just display the URL of the page, for example:
google.com/index.html
You need to have a valid title, and <title> is not a void element. This is why it breaks. To see this, go to a HTML validation website (e.g. https://validator.w3.org) and see what it tells you.
In short - <title> is not a void element - it requires an opening and closing tag.
EDIT: Research showed me this website, which says:
Self-closing: No
So in short they're not self-closing elements. You can find a list of self-closing elements here.
I am trying to set the left and top css properties for a span element. This works fine in HTML4 page but has issues on HTML5 page. The code has been posted on jsfiddle https://jsfiddle.net/arunn/pxxgtnqf/ which shows the behaviour in HTML5 page. I am posting the code here for HTML4 behaviour.
<!DOCTYPE>
<html>
<body>
<span id='hello' style='position:absolute;top:100px;'>hello</span>
</body>
<script type="text/javascript">
document.getElementById("hello").style.left = 100;
document.getElementById("hello").style.top = 100;
</script>
</html>
Make your left and top values a string including a measurment type like "px".
document.getElementById("hello").style.left="100px";
document.getElementById("hello").style.top="100px";
Your fiddle updated
I'm working on a site using Twitter Bootstrap, and want to put some content in a gray box or panel.
I mean much like the 'Basic block' example from bootstrap's own docs. Small screenshot cutout to display what I mean:
Except it's supposed to contain normal HTML content, no code or <pre> stuff or anything.
You can use a well for this. See docs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well well-sm">Well well well</div>
If text is positioned off display, is there any way to convince browsers to copy text only visible on the screen when user selects text using ctrl-a or select all. In the example that follows, I don't want to copy text for the absolute positioned div.
<html>
<body>
<div style="position:absolute;top:30;left:-300">This should not be copied</div>
<div>Only this should be copied</div>
</body>
</html>
Some more information:
Ideally I am looking for solution for webkit/gtk, but this applies to firefox/chrome as well. Both browsers exhibit same behavior.
I don't control the page getting displayed. Page is displayed in webkit window for automated tool which tries to analyse contents of the page. Part of the algorithm looks at the text available by select all/copy
I have access to full API webkit/gtk exposes.
Why not just do display: none; instead of moving it to the left?
<html>
<body>
<div style="display: none;">This should not be copied</div>
<div>Only this should be copied</div>
</body>
</html>
I see no reason why you need to move it off the screen.
User can always use firebug to copy whatever they want.
I have a CSS class where I added a background image like this:
.my-class{
background-image: url(images/my-bg.png);
}
this applies fine and works properly in browsers, but when I see it in the iPad, the background image is not visible.
What could be the reason?
Without further information (i.e. how you're applying this class, and to which element), I can't help further. I can tell you however, that this snippet works just fine on desktop, iPhone and iPad:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.my-class{background-image: url(images/my-bg.png);}
</style>
</head>
<body class="my-class">
<p>Some content</p>
</body>
</html>
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I had this issue and finally after hours of apple bashing and toiling I made a div tag with an ID around my entire site. The iPad loves it :)
Problem solved.
CSS
<style type="text/css">
#bodybackground {
background:#999 url('http://mywebsite.com/images/background.jpg')
}
</style>
HTML
<div id="bodybackground">
entire site here
</div>
Add this meta tag to your page
<meta name = "viewport" content = "width = device-width, height = device-height"/>
I found that I was having the same problem, (ie: no background image shown on iPad specifically), the problem was the use of quotes, or lack thereof, when apostrophes were needed...
Problem (no apostrophes)
.my-class{background-image: url(images/my-bg.png);}
Fix (apostrophes added)
.my-class{background-image: url('images/my-bg.png');}
If you're saving the .png from photoshop, make sure you save it via 'save for web and devices' and select PNG24.