I have a blog and while loading it doesn't show the top. but when finished loading it shows from the top.
while loading: http://prntscr.com/1dv2x9
after: http://prntscr.com/1dv2zm
Somebody please help me... I tried to change margin-top and add some load scripts..but I can't figure out what I should change from the template source.
I tried to edit this:
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body class='loading'>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val;
});
}
Converting previous comment as an answer:
check for negative margins in the body or header structure, that could spot something useful, because answering that question this way is somewhat hard.
Then:
If you are seeing a space on the top then probably you are not setting a margin:0 in the contained item, or padding:0 in your containing item.
Related
I'm adding a Chatango HTML5 chat box to my website, but when users scroll up or down in the chat box, it also scrolls up or down the rest of the page. I've been experimenting with different codes I've found on this site, but so far nothing has worked.
I thought I found a solution here: How to disable scrolling in outer elements? and applied it to my chatroom. It works exactly how I want it to on this codepen editor: http://codepen.io/EagleJow/pen/QbOBJV
But using the same code in JSFiddle: https://jsfiddle.net/4bm6ou90/1/ (or on my actual website) does not prevent the rest of the page from scrolling. I've tested it in both Firefox and Chrome with the same results.
Here's the javascript:
var panel = $(".panel");
var doc = $(document);
var currentScroll;
function resetScroll(){
doc.scrollTop(currentScroll);
}
function stopDocScroll(){
currentScroll = doc.scrollTop();
doc.on('scroll', resetScroll);
}
function releaseDocScroll(){
doc.off('scroll', resetScroll);
}
panel.on('mouseenter', function(){
stopDocScroll();
})
panel.on('mouseleave', function(){
releaseDocScroll();
})
Any ideas?
It didn't work on JSFiddle because I didn't have jQuery set on the side menu and it didn't work on my website because the '$' symbol in the javascript conflicted with that same symbol in the jQuery (or something like that).
Here's the JSFiddle with better code and set to load jQuery: https://jsfiddle.net/4bm6ou90/7/
The Javascript:
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(".panel").on("mouseenter", function(){
$(document).on("scroll", function(){
$(this).scrollTop(0);
});
});
$(".panel").on("mouseleave", function(){
$(document).off("scroll");
});
});
Also gotta have that jQuery CDN in the html head section.
I have a nice working script where you can expand and collapse a div with two "text"-buttons. I want to replace those with an image for expand (expand.png) and another for collapse (collapse.png).
<script type="text/javascript">
$(document).ready(function(){
$("#expanderHead").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").html("−")
}
else {
$("#expanderSign").text("+")
}
});
});
Can't seem to figure out how to implement the img in the code... If anyonde can help, that would be awesome!
Let's suppose your #expanderHead is an <img>, then you can change the source like below:
$(document).ready(function(){
$("#expanderHead").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").attr("src") == "expand.png"){
$("#expanderSign").attr("src","collapse.png");
}
else {
$("#expanderSign").attr("src","expand.png");
}
});
});
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I have read the many threads on stack about this issue, but nothing will resolve my problem. I have the google map on a tab that is initially hidden when the page loads and would like some assistance please. Here is the full code:
<script type="text/javascript">
function loadsinglemap(){
var mymap = new MeOnTheMap({
container: "map_sidebar2",
html: "<?php echo str_replace('"',"",$post->post_title); ?>",
address: "<?php echo str_replace('"','',get_post_meta($post->ID, "map_location", true)); ?>",
zoomLevel: 15,
});
}
jQuery(document).ready(function() { loadsinglemap(); })
</script>
This is on the page where the map is displayed:
<script type="text/javascript">
$(document).ready(function(){
$('a.contact').click(function(){
google.maps.event.trigger(mymap, 'resize');
});
});
</script>
I just cannot get it to work. If anyone sees something that would help please respond.
Thanks
EDIT: Changed the element selector to a class, and my link to a class instead of an ID and it now at least picks it up. I get an error in firebug that "mymap is not defined".
call the initilize() function once again after you unhide the div.
i did it and it worked.
JSFiddle
I found instead of hiding the div set it's height / width to 0px; and set its overflow to hidden.
Helped me hope it helps you :)
Check Roosko's answer here https://groups.google.com/forum/#!topic/google-maps-js-api-v3/aUrVnx-i7LI , it works for me!
Since the map loads before the modal gets a defined size, it renders
size as zero.
<a href="#?w=500" rel="popup2" class="poplight" onClick="initialize()">
<img src='images/location1.png' title='Location' alt='images/location2.png' />
</a>
I called the initilize() function when the pop up is clicked.
i have a ul-Element with 30 li-Elements, but only 20 Elements are shown, the overflow is hidden. Now i want to show the last 20 Elements. Is there a translateY(X)-Method for the ul-Element or something else?
Fesp
This solution is shooting into that big vague question. Hopefully it hits!
<ul id="ul_id" style="height:200px;overflow:hidden;">
<li></li>
...
</ul>
<script type="text/javascript">
document.getElementById('ul_id').scrollTop=150;
</script>
You can scroll a div with "scrollTop" in javascript. Just set the desired offset in pixels.
You'll need to scroll the element to reveal children that are "below the fold". Depending on if they're stacked on top of each other or in a row you'll need to use ul.scrollTop or ul.scrollLeft (from JavaScript).
Not a CSS HTML method I know. But the only way I can think to do what you ask (if I'm guessing correctly) is via jQuery, so.....
This will dynamically add an additional li with "See More..." when clicked, it will show more items on the list.
$(function() {
var hiddenStuff = $('.list li:gt(5)').hide();
if (hiddenStuff.size() > 0) {
var theCaption = '... See More';
$('.list').append(
$('<li class="more" id="toggler">' + theCaption + '</li>')
.toggle( function() {
hiddenStuff.slideDown(1000);
$(this).text('...See Less');
},
function() {
hiddenStuff.slideUp(1000);
$(this).text(theCaption);
})
);
}
});
jsFiddle Demo HERE
A CSS-only solution, which may work for you here: CSS-ONLY DEMO