how to fix or design the print window of a browser - javascript

How to fix this printing layout? is there a way? the text should be aligned left, and the other layout position should be like the original web page,
ive used a javascript which will print only a content from a particular div. but the only problem is this messed up layout.

This is a bit of a link only answer, but you will need to create a print.css style sheet to specifically style the page when printed. I would suggest looking at the following:
http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
How you style the page is really up to you, which makes this a slightly broad question. But you simply style the elements using their classes/ids much as you would when styling the screen. Hope this helps you move forward.

Related

Scale height of div with jquery - How will google react (SEO)?

Suppose I have a big div including much text. I want to show my readers only the first few text-lines. So I thought about scaling down the height of the div with javascript/jquery and add a "Read more" button.
Like that:
$('#content').height(20);
Here's a complete example: http://jsfiddle.net/zvQsX/1/
I guess google will index all the content, but will google interpret this as spam?
Thanks for your help!
Best
Andi
I'm not sure, but I think Google interprets a bit of CSS and display:none and simply would consider a hidden content as non-existent or at-least as less relevant than what you display directly.
Your technique is different and I honestly don't know how Google would interpret it. If we consider the law's intent, you are actually giving your users the whole thing (they can read it if they want and it's on the same page), and it shouldn't be considered as black hat thingy.
That said, why do you want to use scaling of div instead of display:none or text-indent:-9999px ?

How to scale text in html?

Hello I was wondering how to scale text with html. My text looks very large when I make the page smaller. Is there a script or a command that will scale the text down along with the page size?
Well you can use css to change the font-size, if that is what you are referring to.
Your question has me a little confused, but it may just be the way you are phrasing it.
Are you saying that you want the browser to "resize" text, headers, and other content depending on the browser size?
If so, what you are referring to is called responsive design.
Here is a DEMO of a site using this responsive design. (Make the screen bigger/smaller, and let me know if this is what you were trying to achieve)
http://webdesignerwall.com/demo/adaptive-design/final.html
Here is the tutorial behind this demo:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Marquee on mouseover and overflow

I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?
Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow
Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?

HTML layout design - need better approach

I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/

Remove white space beneath Facebook comments plugin

Take a look at the this link. Scroll down a bit and you should see a Facebook comments plugin with an embedded Google map right beneath it.
My problem is, there is a ton of white space between the bottom of the comments plugin and the top of the map. Firebug indicates the white space is at the bottom of the comments plugin (as opposed to the top of the map). However, I can't seem to find a way to eliminate it.
I've tried just using relative CSS positioning to move the map up 50 pixels, but then it sits on top of the comments if there happen to be any. Also, if the user has turned FB comments off, it screws the layout as well.
Any ideas on how to get rid of the excessive white space?
UPDATE: While the answers provided here pointed me in the right direction, it ended up being too much trouble. I simply put the Facebook comments beneath the Google map at the bottom of the page which masks the problem somewhat. Apparently this is a bug according to one of the commenters below, so we'll just have to wait for a fix.
EDIT: Been toying with these styles for a while, no luck. I can alter the height of the box initially based on Jason's suggestions, but anything I do screws up the layout (new comments appear BEHIND the map since the comment area stays the same height as its original height, instead of allowing Facebook to dynamically grow the height of its IFRAME element when a comment is added). Any other ideas?
EDIT #2: It seems that the root of the problem is that Facebook automatically assigns a height of 200px to the IFRAME containing the comments box. When comments are added, Facebook dynamically resizes thie IFRAME to the appropriate height. I'd be able to solve my problem if I could find a way to make that default 200px start at 145px. Not sure if this is possible or why Facebook would think that 200 (arbitrary?) was a good height to start at.
EDIT #3: I realize the white space is coming from the IFRAME that Facebook generates and that there's nothing I can do about that, specifically. I started a bounty on this question because:
1) I find it hard to believe that I'm the only person that has an issue with the way this displays.
2) It's possible it's due to the way I configured something?
3) There's some other workaround I'm not thinking of.
Hopefully the bounty will encourage some creative replies!
Don't set the height to auto, set the overflow...
Set height:110px and overflow:auto on the Facebook iframe - then comments will expand the height of the iframe dynamically.
Pop these changes in your $().ready function - this works fine for me.
I had this problem on Mobile browsers. Facebook added this auto detect for mobile devices. It loads a different version of the plug-in that is full of bugs. Just set the mobile flag to false to force it to use the regular version that does not have bugs. This saved me. I hope it helps you.
There are several contributing factors:
.fbFeedbackContent has min-height: 165px
the loaded iframe has height: 200px
there is an empty span tag within the fb:comment tag
Addressing any or all of these should get you started. You may need to use !important to override some of the CSS.
I was suffering from the same problem. The extra white space only shows up when there are no comments yet. So you just simply do the following:
1.) Swap back to the old markup, because step 2) is not supported by HTML5
2.) Make a new div #commentcount, in which you will load the count of comments. You can hide it with display:none;.
3.) Insert the following code to #commentcount: <fb:comments-count href=http://example.com/></fb:comments-count>, where example.com is the exact URL of where you're commenting. In most cases this will be $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"] (PHP), or the appropriate HTTP header variables in other languages.
4.) Store the comment count in a variable in JavaScript. You can reach the count easily, It's inside the #commentcount div in a span element. If you're not sure about this, check chrome dev tools or firebug, it will show you the rendered structure. (as facebook may change it eventually)
5.) Write a nice javascript code to update the facebook comment container div if(commentcount==0). Add a style of: height:110px; overflow:hidden;.
6.) Load the comment count frequently so if someone comments, you can drop the hidden overflow and fixed height, and they can see the new comment. You can do this using setInterval().
It works!
An easier alternative solution: You can set the style="background-color:#f5f5f5;" for the comments box if you have for example a site with F5F5F5 background color. The comments box colour will blend into your site. It looks nice.
Turn off mobile parameter.
For exemple:
<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10" mobile="false"></div>
i solved it by setting the height on the . im using the facebook plugin in wordpress. you can find that file under /wp-content/plugins/facebook/social-plugins/comments.php in line 75 or set it to css
#respond{
height: 112px;
}
I am using FbComments plugin for Wordpress and there you can set the customisation options. This solved the problem for me.
Where it asks Comment box style AND Whole comment box style enter the height you want. It should be 72px. So you enter height:72px; in the space provided. Don't forget the ;

Categories