I'm working with a project where I need to have a scrollable div element display the bottom when the page loads. This means that the user could scroll upward to see the rest of the content. The only way I could think of doing this would be to have the div autoscroll to the bottom on page load. But since load time is important for this project, I'd like to find another solution. Is there any other way to do this, preferably in something like css? Thanks!
You can use javascript to get this effect. It's fast, so you won't have to worry about load times:
var yourDiv = document.getElementById('yourDivId');
yourDiv.scrollTop = yourDiv.scrollHeight;
There are also numerous ways to implement this using jQuery. Here's a great blog post on the subject:
jQuery Scroll To
I'm not sure to understand well what you need, but maybe something like that:
#bottomDiv{
position:fixed;
bottom:0;
}
There is no javascript tag so what about hide element until css file is not downloaded (but this work only for 1st time, then will be css file cached)
<div id="bottom" style="display: none;"></div>
CSS
#bottom {
display: block !important;
position: fixed;
bottom: 0;
}
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I'm trying to reduce the height of a footer in my WordPress Website.
Apparently (check the picture linked) the style is directly in the div but I failed finding it in my WP files.
Can anyone help me with this?
Capture of the html inspector
When dev tools show styles like this. Its an indicator it's being controlled by JS.
element.styles{
position: relative;
height: 122px
}
As your JS is loading after your css (as it should be), you need to override the property after JS is called. This is one of the few times you should add !important to your css. So to override the JS height you need something like this
.site-footer .widget-area{
height: 400px !important;
}
I've noticed that most of the websites now "somehow" disable viewing some of the images used in their template, so I'd like to obtain this same result:
I thought instead of using the tag <a>with <img>, I put a div and set the "background" property as an image yet it's still viewable in the browser!!
Any ideas?
This is not disabling the images, this is done by using images as backgrounds in CSS and not as a normal img tag like:<img src="your-image.jpg" />. Here's an example how this is done:
HTML
<div class="randomClass"></div>
And the CSS goes like this:
.randomClass {
background-image: url('http://i.ytimg.com/vi/1WmaBpkGjXk/mqdefault.jpg');
background-color: #cccccc;
width:350px;
height: 180px;
}
On the Jsfiddle link I provided above if you right click on the 1st image you have the option to open the image on a new page or the option to download it. On the second one you don't have this options by right clicking on it, but still these images can be downloaded in other ways.
When I go to my website in a new tab, the navigation bar height is double the size it should be. Then, if I refresh, it looks good.
Any idea how to fix it?
My website is www.preciseos.com, when you go there, please check out the top white navigation bar and refresh. You will see the issue.
Oz
The problem comes from the element <div class="social-icons hover-big pull-right"> and more specifically from these two CSS classes :
.social-icons {
display: table
}
and
.pull-right {
float: right
}
In Chrome DevTools, I can replicate the bug if I disable both classes, and then apply the classes social-icons and pull-right in this specific order.
If you make sure that the float: right rule (i.e. the class pull-right) is applied before the display: table rule, it should be ok.
You have a problem with jquery-1.10.2.min.map. It has a 300 status, it isn't found on the server. Check this, and then it will be ok.
I'm using the facebook like button on my site, via an iframe.
Now you have to specify a width of the iframe. Due to various languages of the like button, this means that I have to set the width to at least 70px.
Now i want the like button to be aligned to the far right of my site, now i can do this by adding "text-align:right" in the css style of the iframe. The iframe shows on the right, but not all the way on the right.
This happens because of the iframe width, its 70px, and for example the english like button is only 55px.
Now what i want: To align the actual content of the iframe to the right of the actual iframe.
http://pastehtml.com/view/1dnwtbh.html
Here i have build an example. Its aligned on the right of the div ive build, but because the iframe is larger than the actual like button, its not perfectly aligned to the right. I want to like button to be aligned to the right in the iframe.
I hope you guys can help
css rules only apply to the iframe element, not the contents of the iframe, because it is another webpage entirely.
You 'might' be able to use javascript to add a css stylesheet to the iframe page with:
var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['frame1'].document.head.appendChild(cssLink);
But I'm not sure if that will work on all browsers.
Your best bet is to call the page with AJAX.
That way you can modify the contents of the page before you display it
An example jquery AJAX function might look like this:
$.ajax({
type: "GET",
url: "facebookURL",
dataType: "html",
success: function(html) {
processData(html);
}
});
function processData(fbData) {
$('#injectFBLikeHere').html(function() {
return $(fbData).find('#LikePluginPagelet').html();
});
}
Note I haven't test this, only use it as a starting point or a guide
Modifying the contents of an iFrame is typically impossible by modern web standards : http://en.wikipedia.org/wiki/Cross-site_scripting
Because you cannot determine the width of the like button inside of the iframe, you can't resize the iframe to the minimum width to be nested on the right.
The only way I can think of is resizing the iframe, but as you said, you need it to support multiple languages, which I guess then if you used javascript to detect the user's language ( JavaScript for detecting browser language preference ). You might be able to manually style the like button's iframe width depending on the language. I can't think of any automated way to do this, due to cross site scripting.
Here is what to do.
Insert a DIV called #like before you tag, then Put your Facebook code inside as shown below
<div id="like">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/pages/HUE-Architecture/122612441133152" layout="box_count"></fb:like>
</div>
<!-- End Like
Now create the #like CSS that you applied to the above DIV as shown below and adjust as needed.
/* CSS for Facebook like*/
#like {
position: fixed;
top: 300px;
right: -20px;
float: right;
height: auto;
width: 130px;
}
Note: remove any previous CSS that you applied to the i-frame so it doesn't conflict with this one.
Maybe this will work for you:
when you generate code here, set the width to 0.
Like this? http://d.pr/Cbkd
If so, here's what I did via Firebug
.connect_widget_number_cloud,
.connect_widget_connect_button {float: right !important;}
I also changed the iframe width to something like 60px.