I tried, several times, to create a "save to foursquare button", but, maybe, there´s a problem with the script.
I tried this code, that works, from a website for the site venue:
<div class="locInfo vcard" style="display: none;">
<h4>
<a class="fn" href="">Flying Star Cafe - Menaul</a>
</h4>
<p class="adr">
<span class="street-address">8001 Menaul Blvd NE</span> <br> <span
class="locality">Albuquerque</span>, <span class="region">NM</span>
<span class="postal-code">87110-4607</span>
</p>
</div>
<a href="https://foursquare.com/intent/venue.html"
class="fourSq-widget">Save to foursquare</a>
<br />
<!-- Place this script somewhere after the anchor tag above. If you have multiple buttons, only include the script once. -->
<script type='text/javascript'>
(function() {
window.___fourSq = {
"uid" : "5166539"
};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>
It works nice, but if I use the same structure for this venue: https://pt.foursquare.com/v/centro-drag%C3%A3o-do-mar-de-arte-e-cultura/4be5f4802468c92887d30043
something goes wrong...
<div class="locInfo vcard" style="display: none;">
<h4>
<a class="fn" href="">Centro Dragão do Mar de Arte e Cultura</a>
</h4>
<p class="adr">
<span class="street-address">Rua Dragão do Mar, 81</span> <br> <span
class="locality">Fortaleza</span>, <span class="region">CE</span> <span class="postal-code">60060-390</span>
</p>
</div>
<a href="https://foursquare.com/intent/venue.html"
class="fourSq-widget">Save to foursquare</a>
<br />
<!-- Place this script somewhere after the anchor tag above. If you have multiple buttons, only include the script once. -->
<script type='text/javascript'>
(function() {
window.___fourSq = {
"uid" : "5166539"
};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>
Any clues?
I do not know if the problem is that the venue location is outside US... Is there an additional parameter that I should use for my venue?
I am using Google Chrome 18.0.1025.162 and running the code inside the Apache Tomcat 7.0.27
In order to determine the correct venue, you should give as much unique details of the venue as possible. In your case, it is sufficient to add the telephone number of the venue:
<div class="locInfo vcard" style="display: none;">
<h4>
<a class="fn" href="">Centro Dragão do Mar de Arte e Cultura</a>
</h4>
<p class="adr">
<span class="street-address">R. Dragão do Mar, 81</span> <br />
<span class="locality">Fortaleza</span>, <span class="region">CE</span>
<span class="postal-code">60060-390</span> <br />
<span class="tel">+55 85 3488-8600</span>
</p>
</div>
Save to foursquare
<br />
<script type='text/javascript'>
(function() {
window.___fourSq = {
"uid" : "5166539"
};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>
I had problems with that because I wrote a wrong locality (it was not exactly the same what I wrote on FS). Try to eliminate that class and give it a try...
Related
I'am working on a project basically using Javascript (mainly webcam libraries). What i want to achieve is to manage when and where to use each library on a specific purpose.
To walk you through, first of all I provide different features that would potentially work according to what is selected from the radio buttons (See Figure 1).
For example in Default Mode none features are applied, however on the second radio button (Face Tracking Mode), I want to access a specific library and detect the face from the given input - which works.
The issue here is that I want to :
1)stop tracking faces,
2)clear everything on the canvas,
in case of changing the radio input selection.
My first idea to solve this, is to create a function that would do that every time i call it (when i change mode-radio button) -> see last function resetCanvasFeatures() that would basically use something like faceTracking.stop();
Im not sure if the following ideas (threads or jquery) would help here.
Please if you have any suggestions let me know.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Face Tracking</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Libraries Declaration -->
<!-- p5js -->
<script type="text/javascript" src="libraries/p5.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.dom.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.sound.min.js"></script>
<!-- tracking.js -->
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/tracking.js"></script>
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/data/face-min.js"></script>
<script src="libraries/tracking.js-master/tracking.js-master/examples/assets/stats.min.js"></script>
<!-- jquery.min.js-->
<script src="libraries/jquery-3.3.1.min.js"></script>
<!--
<script src="../node_modules/dat.gui/build/dat.gui.min.js"></script>
-->
<!-- MY SCRIPT -->
<script src="scripts/faceTrackingTool.js"></script>
<!-- Reference Cascade Style Sheet -->
<link rel="stylesheet" type="text/css" href="styles\styles.css">
</head>
<body>
<!-- ADD TITLE ELEMENT -->
<div>
<h1 id="main_Title">Mirror Mirror on the Wall</h1>
<p id="description">Welcome to this website. After enabling your webcam, simply select an option from the sections below.</p>
</div>
<!-- ADD RADIO BUTTONS (Program functionality is performed) -->
<div id="radioButtonController-container">
<form name="radioButtonControllerForm">
<section id="radioButtonsSection">
<!-- DEFAULT -->
<div>
<input type="radio" id="radio0" name="radioButtonController"
value="default">
<label for="radio0">
<h2>Default Mode : </h2>
<p>Canvas draws every frame of the video - No features are implemented here</p>
</label>
</div>
<!-- FACE TRACKING -->
<div>
<input type="radio" id="radio1" name="radioButtonController"
value="faceTracking" onClick="faceTracking()">
<label for="radio1">
<h2>Face Tracking Mode : </h2>
<p>Uses tracking.js library - Detects one or more faces from the given input</p>
</label>
</div>
<!-- SLIM TOOL -->
<div>
<input type="radio" id="radio2" name="radioButtonController"
value="slimTool">
<label for="radio2">
<h2>Slim Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- HAIR TOOL -->
<div>
<input type="radio" id="radio3" name="radioButtonController"
value="hairTool" disabled>
<label for="radio3">
<h2>Hair Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- BACKGROUND TOOL -->
<div>
<input type="radio" id="radio4" name="radioButtonController"
value="backgroundTool">
<label for="radio4">
<h2>Background Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- MORPH WITH TOOL -->
<div>
<input type="radio" id="radio5" name="radioButtonController"
value="morphTool">
<label for="radio5">
<h2>Morph Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
</section>
</form>
</div>
<br/><br/>
<!-- ADD EDITED CANVAS DIV ELEMENT -->
<div id="editingCanvas-container">
<!-- <canvas id="editingCanvas-element"></canvas> is added here from faceTrackingTool.js -->
<!-- <h3>Edited Canvas</h3> -->
</div>
<!-- ADD ORIGINAL VIDEO DIV ELEMENT -->
<div id="originalVideo-container">
<!-- <video id="originalVideo-element"></video> is added here from faceTrackingTool.js -->
<!-- <h3>Original Canvas</h3> -->
</div>
</body>
</html>
JAVASCRIPT FILE:
var canvas;
var canvasWidth = 640;
var canvasHeight= 480;
var videoElement; //Holds the video element (<video....>)
var frame; //Holds an image() object of every frame of the video
var selectedRadioButton; //Holds the value of the selected radio button
var tracker;
var trackingTask;
var faceTrackingMode = false; //TRUE- Open Tracking, FALSE-Declare variables once
function setup(){
//Set Default Radio Button (Get access from <form> element)
document.radioButtonControllerForm.radioButtonController[0].checked= true; //Default Mode
//Create original canvas and move it
//so it’s inside <div id="editedCanvas-container">
canvas = createCanvas(canvasWidth, canvasHeight); //480p
canvas.parent('editingCanvas-container');
canvas.id("editingCanvas-element");
//Change the style of the canvas so it presents a mirror
document.getElementById("editingCanvas-element").style.border = "1px solid black";
document.getElementById("editingCanvas-element").style.borderRadius = "40px";
//Activate Web-Camera,set attributes and move it
//so it’s inside <div id="originalVideo-container">
videoElement = createCapture(VIDEO);
videoElement.parent('originalVideo-container');
videoElement.id("originalVideo-element");
videoElement.size(canvasWidth, canvasHeight); //480p
//originalCapture.hide(); //Do not Hide Original Capture
var canvasTitle = createElement("h3", "Editing Canvas");
canvasTitle.parent('editingCanvas-container');
var videoTitle = createElement("h3", "Original Video");
videoTitle.parent('originalVideo-container');
}
function draw(){
/* Store every frame in the variable (Holds image() Object)*/
frame = image(videoElement, 0, 0, width, height);
// (Default, Face Tracking, Slim Tool, Hair Tool, Background Tool, Morph Tool)
selectedRadioButton = getSelectedRadioButtonValue();
radioButtonsMananger(selectedRadioButton); //Pass the selected Option Value to function
}
function getSelectedRadioButtonValue(){
var selected; //Set variable to hold selected value
//Default
if (document.radioButtonControllerForm.radioButtonController[0].checked) {
selected = document.radioButtonControllerForm.radioButtonController[0].value;
}
...........
else if (document.radioButtonControllerForm.radioButtonController[5].checked) {
selected = document.radioButtonControllerForm.radioButtonController[5].value;
}
return selected; //Return selected values
}
function radioButtonsMananger(selectedOption){
switch(selectedOption){
case "default":
resetCanvasFeatures();
//console.log("use default");
break;
case "faceTracking":
resetCanvasFeatures();
//faceTracking();
break;
...........
}
}
function faceTracking(){
//Check if the variables are already declared
if(faceTrackingMode === false){
myVideo = document.getElementById('originalVideo-element');
myCanvas = document.getElementById('editingCanvas-element');
myCanvasContext = myCanvas.getContext('2d');
//Open Tracker from tracking.js library
//Open tracker - use array (ObjectTracker(['face','eye','mouth']))
tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
trackingTask = tracking.track(myVideo, tracker, { camera: true });
faceTrackingMode = true; //Set to TRUE - Do not declare those variables again
}
trackingTask.run();
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
myCanvasContext.strokeStyle = '#a64ceb';
myCanvasContext.strokeRect(rect.x, rect.y, rect.width, rect.height);
myCanvasContext.font = '11px Arial';
myCanvasContext.fillStyle = '#000000 ';
myCanvasContext.fillText('x: ' + rect.x + 'px', rect.x +
rect.width + 5, rect.y + 11);
myCanvasContext.fillText('y: ' + rect.y + 'px', rect.x +
rect.width + 5, rect.y + 22);
});
});
}
function resetCanvasFeatures(){
setTimeout(function () {
trackingTask.stop();
}, 10000);
}
FIGURE
Using onchange tag on the input seems to be working great. no repeated loop functions.
<input type/id/name/value onchange="nameOfTheFunction()">
Does anyone know why the performance on this page is slow when it comes to the dropdown list on the - ALL - option? I must be doing something wrong with knockout.js for this to happen. For the smaller list of games it opens up quickly.
Tournament Schedule
Javascript
(function (app, $, undefined) {
app.viewModel = app.viewModel || {};
function Schedule() {
var self = this;
self.loaded = ko.observable(false);
self.divisionId = ko.observable();
self.games = ko.observableArray(null);
self.search = function(url) {
app.call({
type: 'POST',
data: { divisionId: self.divisionId() },
url: url,
success: function (result) {
self.games([]);
self.games.push.apply(self.games, result);
self.loaded(true);
}
});
};
self.init = function (options) {
app.applyBindings();
};
};
app.viewModel.schedule = new Schedule();
} (window.app = window.app || {}, jQuery));
Template
<div class="games hidden" data-bind="if: schedule.games(), css: { 'hidden': !schedule.games() }">
<div data-bind="if: schedule.games().length > 0">
<div data-bind="foreach: schedule.games">
<h2><span data-bind="html: Name"></span></h2>
<hr />
<div class="games row" data-bind="foreach: Games">
<div class="span4">
<div class="game game-box new-game-box">
<div class="datetime-header clearfix new-game-box">
<span class="time"><span data-bind="html: DateFormatted"></span> - <span data-bind="html: TimeFormatted"></span></span>,
<span class="gym" data-bind="text: Venue"></span>
</div>
<div class="team-game clearfix new-game-box" data-bind="css: { winner: AwayTeamIsWinner }">
<span class="team">
<a target="_blank" href="#" data-bind="html: AwayTeamName, attr: { href: AwayTeamLink }"></a>
</span> <span class="score" data-bind="html: AwayTeamScoreDisplay"></span>
</div>
<div class="team-game clearfix new-game-box" data-bind="css: { winner: HomeTeamIsWinner }">
<span class="team">
</span> <span class="score" data-bind="html: HomeTeamScoreDisplay"></span>
</div>
<div class="buttons clearfix">
<span class="division" data-bind="html: 'Division ' + DivisionName"></span>,
<span data-bind="text: GameTypeName"></span>
<div class="btn-group">
<a rel="nofollow, noindex" title="Add to calendar" href="#" class="btn btn-mini" data-bind="attr: { href: CalendarLink }"><i class="icon-calendar"></i></a>
<a target="_blank" title="Gym Details" href="#" class="btn btn-mini" data-bind="attr: { href: GymLink }"><i class="icon-map-marker"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden" data-bind="if: (schedule.games() && schedule.games().length == 0), css: { 'hidden': !schedule.games() }">
No games found for this event.
Scores will be available here the day before the event however the schedule might already be posted under documents.
</div>
<script type="text/javascript">
app.viewModel.schedule.init({});
</script>
I downloaded your HTML and CSS and did some testing. I was able to fix the problem by removing the following CSS:
.ui-widget :active {
outline: none
}
To test this on the current page, execute document.styleSheets[0].deleteRule(23) in the console.
Some more testing showed that the drop-down is only slow in Chrome (30). Firefox (23) and IE (10) don't have the problem.
You may suffer from performance problems when manipulating large or rich (containing complex objects) observable arrays. Any time you perform any operation on such array, all the subscribers get notified.
Imagine you are inserting 100 items into an observable array. More often than not, you don’t need each subscriber to recalculate it’s dependencies 100 items, and UI to be reacting 100 times. Instead, once should just fine.
To do this, you can always modify the underlying array instead of the observableArray directly, since observableArray concept is just a function wrapper around the traditional JS array. After you are done with the array manipulation, you can then notify all the subscribers that the array has changed its state with .valueHasMutaded()
. See the simple example:
success: function (result) {
ko.utils.arrayPushAll(self.games, result);
self.games.valueHasMutated();
....
cheers
There are too many dom element at the page, it will be hard to select element for jquery.
If you need to handle big data bound after ajax, you'd better add a new thread to do it. in ajax success function:
setTimeout(function(){
// your code
}, 100);
for No.1, why not add a pager? Long long scroll bar is very terrible.
My goal is to have several input fields with Autocomplete functionality and each input will generate a marker on the map. I then need the map to zoom in to contain all of the markers. I have this working partially, without the Autocomplete functionality. I have tried adding the Google Maps API Places Autocomplete code to my for loop, but to no avail. It gives autocomplete functionality to all the input fields but only places a marker for the last input.
Any help/insight/guidance is appreciated.
Here is my code, the autocomplete is currently deleted since I couldn't get it to work.
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 well">
<div id="locations">
<form>
<label>Location 0</label>
<input id="address0" type="text" size="50" >
<button id="clearField0">Clear</button>
<div class="panel">
<label>Location 1</label>
<input id="address1" type="text" size="50">
<button id="clearField0">Clear</button>
</div>
<div class="panel">
<label>Location 2</label>
<input id="address2" type="text" size="50">
<button id="clearField0">Clear</button>
</div>
</form>
</div>
<button id="addField">+</button>
<button id="deleteField">-</button>
<button id="submit">Submit form</button>
</div>
<div class="span8">
<div id="map-wrapper">
<div id="google-map"></div>
</div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtNo_o0u8wYeqgiFF-KpvAtEy18T-PvAo&sensor=false&callback=createMap"></script>
<script type="text/javascript">
var inputFields = parseInt($('form input').size());
var markers = [];
var createMap = function() {
var latlngbounds = new google.maps.LatLngBounds();
var geocoder = new google.maps.Geocoder();
var myOptions = {
center : new google.maps.LatLng(35.9081, -78.8628), //center to RTP
zoom : 12,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById("google-map"), myOptions);
$("#submit").on("click", function() {
setAllMap(null);
markers.pop();
for (i=0; i<inputFields; i++) {
var location = $("#address" + i).val();
geocoder.geocode( {'address': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
latlngbounds.extend(results[0].geometry.location);
map.fitBounds(latlngbounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
};
});
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
$('#addField').click(function(){ //add input field to bottom of form
$('form').append('<div class="panel"><label>Location '+ inputFields +'</label><input id="address'+ inputFields +'" type="text" size="50"><button id="clearField'+ inputFields +'">Clear</button></div>');
inputFields++;
});
$('#deleteField').click(function(){ //delete last input field
$('.panel').last().remove();
inputFields--;
});
};
</script>
My first problem was including the places library in the API reference. Following that, I simply needed two lines of code from Google's Places Autocomplete example page, as opposed to the entire script they offer:
var input = /** #type {HTMLInputElement} */(document.getElementById('searchTextField'));
var autocomplete = new google.maps.places.Autocomplete(input);
These two lines in my for loop solved the problem. Thanks again to Dr. Molle whose comment made me rethink what code I needed.
I have implemented this to my wordpress theme, and I'm trying to figure out, how to implement the hashchange, when I click a link inside a folder. I've tried to use this tutorial to trigger the hashchange. The hashchange works, when i comment out the "Load permalink to .itemContent" , but then the item slides down and up instantly. When its not commented out, the hashchange doesn't trigger.
Also, if someone copys the http://www.pathtomydomain.com/#/item-name-1 to the address bar (or bookmarks it), how to open the folder according to the url? Something to to with .trigger(click)?
HTML
<div id="container">
<div class="item">
<a href="http://pathtomydomain.com/item-name-1">
<img src="an-image-1.jpg" />
</a>
</div>
<div class="item">
<a href="http://pathtomydomain.com/item-name-2">
<img src="an-image-2.jpg" />
</a>
</div>
<div class="item">
<a href="http://pathtomydomain.com/item-name-3">
<img src="an-image-3.jpg" />
</a>
</div>
</div>
<div class="itemContent"></div>
JQUERY
$.ajaxSetup({cache:false});
$('.item').click(function(){
if($('.itemContent').is(":visible")){
$('.itemContent').slideUp("fast", function(){
});
} else if ($('.itemContent').is(":hidden")) {
$('.itemContent').empty();
$('.itemContent').html('<img class="loading" src="ajax-loader.gif"/>');
$('.itemContent').slideDown("fast", function(){
var $dock = $('#navigation'),
dockHeight = $dock.height();
$("html, body").animate({
scrollTop: $('.itemContent').offset().top - ( $(window).height() - dockHeight - $(this).outerHeight(true) ) / 2
});
});
/*
Load permalink to .itemContent .
*/
var post_link = $(this).children("a").attr("href");
$(".itemContent").load(post_link);
return false;
}
});
var $mainContent = $(".itemContent"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
location.hash = this.pathname;
return false;
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
});
$(window).trigger('hashchange');
I created in blog spot a new page for a gallery with a menu, the result is good but there is so much space between the buttons, and a big gap in the top of the page, when I try <b> or <p> It wont go, I also tried to minimise the space with another script but the result was no space but unclickable buttons, and always when I success deleting spaces, the buttons wont work ! Please help me ! (It works on dreamweaver perfectly but not on Blogger !
This is the code :
<p> <p><b:include data='blog' name='all-head-content'/></p>
<p><style type="text/css">
.menutitle{
cursor:pointer;
<span style="margin-bottom: 5px"><br>;
background-color:#000000 ;
color:#FFF;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:0px solid #000000;/* */
}</p>
.submenu{
margin-bottom: 0.5em;
}
</style> </p>
</b:if>
<p><script type="text/javascript">
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
<p>if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate </p>
</script></p>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Dior</div>
<span class="submenu" id="sub1">
<p><div id="PictoBrowser110620155241">Get the flash player here: http://www.adobe.com/flashplayer</div><script type="text/javascript" src="http://www.db798.com/pictobrowser/swfobject.js"></script><script type="text/javascript"> var so = new SWFObject("http://www.db798.com/pictobrowser.swf", "PictoBrowser", "500", "650", "8", "#000000"); so.addVariable("source", "sets"); so.addVariable("names", "Scheisse"); so.addVariable("userName", "ScheisseMag"); so.addVariable("userId", "64286522#N04"); so.addVariable("ids", "72157626880953125"); so.addVariable("titles", "on"); so.addVariable("displayNotes", "on"); so.addVariable("thumbAutoHide", "off"); so.addVariable("imageSize", "medium"); so.addVariable("vAlign", "mid"); so.addVariable("vertOffset", "0"); so.addVariable("colorHexVar", "f"); so.addVariable("initialScale", "on"); so.addVariable("bgAlpha", "8"); so.write("PictoBrowser110620155241"); </script>
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
- Usage Terms<br>
- DHTML FAQs<br>
- Scripts FAQs</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
- Coding Forums<br></span>
<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
- JavaScript Kit<br>
- Freewarejava<br>
- Cool Text<br>
- Google.com
</span></p></div> </p>
I'm assuming you're using Firefox, because it doesn't seem to work the same using other browsers..
the problem is the space between eich
bouton like between Dior and Faq/help
and help forum, they are meant to be
attached to each other
I'll start by saying that I'm not familiar with Blogger.
Your HTML:
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">..</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">
What you get if you View Source on your page:
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">..</span><br /> <!-- extra br! -->
<div class="menutitle" onclick="SwitchMenu('sub3')">
Those frequent extra <br />s are the main problem. There are lots of them. You need to prevent them from being inserted. Perhaps removing the whitespace in your HTML will help? Like this:
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">..</span><div class="menutitle" onclick="SwitchMenu('sub3')">
also the gap between the Title of the
page and those menus !
You need to get rid of many instances of <p> and </p> that are wrapped around everything, including <script>s, for some reason..
Also, you have the same problem with <br />s being magically inserted. Again, compare your HTML to what comes out when you use View Source in your browser.
After removing those extraneous <p> and </p> and <br /> using Firebug (just to test), this was the result: