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.
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.
So, basically, I'm working on my first Tumblr theme here: teenaqe-vow.tumblr.com and everything is fine and dandy so far EXCEPT for the infinite scroll code. What happens is it works perfectly fine until you go to a tagged page like this one. http://teenaqe-vow.tumblr.com/tagged/music What happens is that when you scroll down, instead of loading the next page of the tagged pages, it loads a page from the index page. I'm using a script that keeps the posts all nestled together and renders the infinite scroll and without it there are gaps in the posts and it doesn't work out too well.
I'm really new with this whole thing so I'm kind of at a loss of how to fix it. I apologize if any of the information I provide is inadequate, please let me know if you need something more from me.
Here is the entire theme code: http://pastebin.com/X8DaLKPG
Here is the infinite scroll / masonry part:
{block:IndexPage}{block:IfTwoColumn}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
{block:IfInfiniteScroll}
<div id="pagination"></div>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
{/block:IfInfiniteScroll}
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#entry',
});
});
$container.infinitescroll({
itemSelector : "#entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "http://media.tumblr.com/ec1742dbca16ca94b47814f1de4e37e6/tumblr_inline_mj8pf7Te3l1qz4rgp.png",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
{/block:IfTwoColumn}{/block:IndexPage}
Your pagination link is fixed on the main page (it always points to user.tumblr.com/page/2/). Use the Tumblr API pagination tools instead.
I have been having this same issue on my Tumblr and have finally resolved it, so I thought that I would share my mistake and my resolution in the hopes that it will help a fellow beginner, such as myself :)
This is what I had to start with that was causing the issue:
<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" href="/page/2" id="next"></a></div>
And this is my resolution:
<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" {block:NextPage}href={NextPage} id="next" {/block:NextPage}></a></div>
You'll notice that the only change has been made to the href attribute. When you set it to /page/2, it's telling the tag page to show page 2 from the index page, because it is missing the name of the tag from the URL. When you add Tumblr's pagination block tag for next page ({block:NextPage}) and the next page URL ({NextPage}), it will then be able to decipher whether or not you are starting from an index page or a tag page, and then be able to fill in the blanks in the URL by itself. I hope this helps!
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.
I am creating a div where you can drop files from your desktop, but also upload them by clicking on it. Because of the security limitations (I can't trigger a click for an file input), I am doing the trick of moving around an opacity 0 file input, following the mouse while it's on the target div. It perfectly works on Chrome, but Firefox doesn't do the trick (as it sticks the file input to the top left of the div. I'll show you the structure I am using:
<div style="position:relative;width:500px">
<img class="img-drop" width="500" src="http://placehold.it/500x500">
<div class="over-img-drop" style="position:absolute;width:100%;height:100%;top:0;">
Drop or click to upload a picture.
<input type="file" style="position:absolute;width:20px;height:20px;opacity:0" class="fileupload">
</div>
<i class="icon-chevron-down"></i>
</div>
And here comes the Javascript
<script type="text/javascript">
$(".over-img-drop").on("mouseover, mousemove", function(e){
if($(e.target).hasClass("fileupload")) //if event is happening over file input, avoid moving
return true;
$(this).find(".fileupload").css("top", e.offsetY-10).css("left", e.offsetX-10);
return false;
});
</script>
Well, I happened to find a solution:
event.offsetX and event.offsetY is available on Chrome, but not on Firefox (those values return undefined). What you have to do is to calculate the offset manually and put any position based on this calculations: jQuery includes this, as mentioned here.
What you should do is to get the container's offsets, and substract this from the event.pageX and event.pageY. So, the code looks like this:
<script type="text/javascript">
$(".over-img-drop").on("mouseover, mousemove", function(e){
if($(e.target).hasClass("fileupload"))
return true;
var offsets = $(this).offset();
$(this).find(".fileupload").css("top", e.pageY-offsets.top-10).css("left", e.pageX-offsets.left-10);
return false;
});
</script>
I Have Been working on a page the using a jquery autocomplete so that while your typing in a clients name its searching the databases for any macth containing that phrase. so using "LIKE" .
i have also put together a jquery silder so that it displays the records that are automaticly loaded from the database and when u click on one it will load more inofmation from the database..
indivaully thesse 2 pieces of code work fine so the jquery autocomplete on a serprate page just loading text enterys from a database.
and the jquery slider works fine with manually entered data and data loaded by php from a database..
but when i put them together the problem is it shows the record on the screen with the styling from the jquery slider but when u click the record it doesnt show anything so no slider (atm just manual html data in the slider for testing)
i have tried multipule tests such as running them serpeatre, placing them in different div tags. i have got it to work with a single sql query but it isnt what i need to do because i dont want the page to need to be refreshed for loading data.
i have placed my code from both files so th is first one is what calls the ajax request to create the records..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".recordrow").click(function() {
var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
$("#"+divid).show().animate({ "right": '0%'}); //Bring the div from right to left with 200px padding from the screen
});
$('#bt-close').click(function(){
$('.details').animate({right:-2000}, 500);
});
});
function getStates(value){
$.post("sql.php",{partialState:value},function(data){
$("#results").html(data);
});
}
</script>
<input type="text" onkeyup="getStates(this.value)"/>
<br />
<div id="results">
</div>
And this is the page which querys the database
<?php
if($_POST['partialState']){
mysql_connect("localhost","root")or die (mysql_error());
mysql_select_db("ict_devices") or die (mysql_error());
$test=$_POST['partialState'];
$text="... More details of the records";
$states = mysql_query("Select * from students Where FirstName LIKE '%$test%'");
while($state= mysql_fetch_array($states)){
echo '<div class="recordrow" id="row-$state["id"]">'.$state['FirstName'].'</div>';
echo '<div class="details" id="details-$state["id"]">'.$text.'Close</div>';
}
}
?>
any help would be greatly appricated
I think you need to bind a click function on "recordrow" div after you got it by ajax. In your code there are no "recordrows" on the moment a click event binds. So you need something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function getStates(value){
$.post("sql.php", function(data){
$("#results").html(data);
$('.recordrow').each(function() {
$(this).bind('click', function() {
var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
$("#"+divid).show().animate({ "right": '0%'}); //Bring the div from right to left with 200px padding from the screen
});
});
$('#bt-close').each(function() {
$(this).bind('click', function(){
$('.details').animate({right:-2000}, 500);
});
});
});
}
</script>
Your ajax is right and when you test slider recordrows already in DOM, click binds correcly. That is why it works by parts
EDIT: I test my code and add binding of bt-close event, it works for me, try it. It shows details when clicked and animation launches