I am using the following code which does 2 out of the 3 things I want it to do, shares dynamic content with a custom twitter button:
<script type="text/javascript">
// <![CDATA[
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
document.write('<a href="' + twtLink + '" target="_blank"' + '><img src="images/twitter.png" border="0" alt="Tweet This!" /' + '><' + '/a>');
// ]]>
</script>
What I would like it to do is also popup in a window rather than a full page view. My knowledge of script is limited so I don't know where to insert the appropriate popup code.
Any help?
instead of document.write you need window.open. Make sure the event is done in a click action, otherwise popup blockers would stop your script
<script type="text/javascript">
function fbs_click() {
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
window.open(twtLink);
}
</script>
And in your HTML add your image tag like this:
Hope this helps
You can place an ID="twitPop" on the anchor and use this as well.
$('#twitPop').click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});
Related
I am so close to getting this. Here's my code that is returning the correct url, but only when button is double-clicked. I only need one click to retrieve the image.
var origin = 'COMP';
var area = 'US';
var type = 'typeA';
var level = 'Xnay';
var time = '0';
var btn1 = document.getElementById("redbutton").winControl;
function change_area(new_area) {
area = new_area;
}
function change_type(new_type) {
type = new_type;
}
$(btn1).click(function () {
var src = "http://somesite.net/folder/WEB_" + origin + "_" + area + "_" + level + "_" + type + "_" + time + "HR.png";
change_area('GB');
change_type('typeB')
$('#mainmap').attr('src', src), false;
});
You try by adding
$(document).ready(function() { }); block
before the following line
$(btn1).click(function () {
Finally as,
$(document).ready(function() {
$(btn1).click(function () {
var src = "http://somesite.net/folder/WEB_" + origin + "_" + area + "_" + level + "_" + type + "_" + time + "HR.png";
change_area('GB');
change_type('typeB')
$('#mainmap').attr('src', src), false;
});
});
I have a javascript function that opens a login.htm window in the mode I would like after I click a button on my index.htm page ....
function openApp() {
var options = "channelmode=" + 1 +
",resizable=" + 1 +
",menubar=" + 0 +
",toolbar=" + 0 +
",location=" + 0 +
",titlebar=" + 1 +
",status=" + 1 +
",scrollbars=" + 1;
var name = "reporting";
var appURL = "login.htm"
var newWindow = window.open(appURL,name,options);
newWindow.focus();
}
It works fine but now I would like to move the functionality of opening the window into the login.htm window on load function.
For example if someone goes to login.htm itself, i want the window to open up in that mode.
I've tried a few things but can't figure this out. Can someone please help me.
I am using jquery so I could do it using jquery.
thanks
If you've got a DOM element with a click event that opens the login.htm and you want to open a new window as well with the same window properties if another DOM element is clicked just set the click event to that that DOM element, as in <span onclick="openApp()">Login</span>.
You could navigate to the log in page and set a setTimeout.
Just place this code in the log in page that the user navigates to, and it will open a new window on its own after the log in page DOM is loaded.
<script type="text/javascript">
setTimeout(function () {
var openApp = function () {
var options = "channelmode=" + 1 +
",resizable=" + 1 +
",menubar=" + 0 +
",toolbar=" + 0 +
",location=" + 0 +
",titlebar=" + 1 +
",status=" + 1 +
",scrollbars=" + 1;
var name = "reporting",
appURL = "login.htm",
newWindow = window.open(appURL, name, options);
newWindow.focus();
}();
}, 100);
</script>
You would take the section that var options is being set and put it outside of the openApp() function, like so:
var options = "channelmode=" + 1 +
",resizable=" + 1 +
",menubar=" + 0 +
",toolbar=" + 0 +
",location=" + 0 +
",titlebar=" + 1 +
",status=" + 1 +
",scrollbars=" + 1;
function openApp() {
var name = "reporting";
var appURL = "login.htm"
var newWindow = window.open(appURL,name,options);
newWindow.focus();
}
Then you can call openApp() however you'd like.
If you want to run openApp() to execute when the whole page is fully loaded (i.e. all images are loaded) then you'd do the following:
$(window).load(function(){
openApp();
});
If you want to execute openApp() when the document is in its "ready" state (when he DOM is available to manipulate), then do the following:
$("document").ready(function(){
openApp();
});
I have a few cascading dropdowns on the bottom of my php page. Each time a user selects an option from the dropdown the following function is called to add the value of that option to my url variables. Currently the page refreshes to the top each time which is a huge problem. Normally I would use something like onCLick="window.location='page.htm#bottom';" to refresh to the bottom of the page but the below function stops working when I add the #bottom. Can someone help me adjust this function or give me other ideas that will refresh to the bottom of the page when the function is done.
function reload5(form){
if(document.getElementById('fda1').checked) {
var fda = '1';
}else if(document.getElementById('fda0').checked) {
var fda = '0';
}
var val=form.category.options[form.category.options.selectedIndex].value;
var val2=form.subcat.options[form.subcat.options.selectedIndex].value;
var val3=form.subcat1.options[form.subcat1.options.selectedIndex].value;
var val4=form.subcat2.options[form.subcat2.options.selectedIndex].value;
var comp1=form.mname.options[form.mname.options.selectedIndex].text;
var itemnum=document.getElementById('item').value;
var desc=document.getElementById('desc').value;
var quan=document.getElementById('quan').value;
var list=document.getElementById('list').value;
var uom=form.uom.options[form.uom.options.selectedIndex].text;
self.location='add_products.php#bottom?fda=' + fda + '&desc=' + desc + '&quan=' + quan + '&list=' + list + '&uom=' + uom + '&item=' + itemnum + '&cat=' + val + '&cat2=' + val2 + '&cat3=' + val3 + '&cat4=' + val4 + '&comp=' + comp1 ;
}
So this doesn't work: self.location='add_products.php#bottom?fda=' + fda
But this does : self.location='add_products.php?fda=' + fda
Any idea where to put the #bottom?
The issue is that the hash must come after the query string at the end. See this article. Try this... (I also cleaned up the code)
function reload5(form){
var val=form.category.options[form.category.options.selectedIndex].value,
val2=form.subcat.options[form.subcat.options.selectedIndex].value,
val3=form.subcat1.options[form.subcat1.options.selectedIndex].value,
val4=form.subcat2.options[form.subcat2.options.selectedIndex].value,
comp1=form.mname.options[form.mname.options.selectedIndex].text,
itemnum=document.getElementById('item').value,
desc=document.getElementById('desc').value,
quan=document.getElementById('quan').value,
list=document.getElementById('list').value,
uom=form.uom.options[form.uom.options.selectedIndex].text,
fda;
if(document.getElementById('fda1').checked) {
fda = 1;
} else if(document.getElementById('fda0').checked) {
fda = 0;
} else {
fda = -1;
}
window.self.location.href = 'add_products.php?fda=' + fda + '&desc=' + desc + '&quan=' + quan + '&list=' + list + '&uom=' + uom + '&item=' + itemnum + '&cat=' + val + '&cat2=' + val2 + '&cat3=' + val3 + '&cat4=' + val4 + '&comp=' + comp1 + "#bottom";
}
What I don't understand is why you are not doing something with Ajax that would not cause the page to refresh at all.
I can't figure out why this script isn't working in IE7 and 8. It works fine in all other browsers, but for some reason, in IE7 and 8 this script is only firing the // thumbs hover bit, and not the // loading images bit (which is actually more important). Everything seems to be fine, does anyone have any ideas?
function featuredJS() {
$("[title]").attr("title", function(i, title) {
$(this).data("title", title).removeAttr("title");
});
// loading images
var last = "featured/01.jpg";
$("#thumbs a").click(function(event) {
event.preventDefault();
var position = $(this).attr("class");
var graphic = $(this).attr("href");
var title = $(this).attr("alt");
var description = $(this).data("title");
var currentMargin = $("#full-wrapper #full").css("marginLeft");
var currentWidth = $("#full-wrapper #full").css("width");
var transitionTest = currentMargin.replace("px", "") * 1;
if(last != graphic && ((transitionTest % 938) == 0 || transitionTest == 0)) {
$("#placeholder").before( "<div class='featured'><div class='description " + position + "'>" + "<h3>" + title + "</h3>" + "<p>" + description + "</p>" + "</div><img src=\"" + graphic + "\" /><div style='clear:both;'></div></div>" );
$("#full-wrapper #full").animate({
marginLeft: "-=938px"
}, 500);
$("#full-wrapper #full").css("width","+=938px");
last = graphic;
};
});
// thumbs hover
$("#thumbs .thumb").hover(
function () {
$(this).find(".red-bar").animate({height:"72px"},{queue:false,duration:500});
},
function () {
$(this).find(".red-bar").animate({height:"3px"},{queue:false,duration:500});
}
);
};
Demo page at http://www.weblinxinc.com/beta/welex/demo/
Your problem is caused by not having a margin set to begin with. transitionTest then becomes NaN because the style is auto, not 0px like you're expecting. Consider trying this instead:
var transitionTest = parseInt("0"+currentMargin,10);
This will trim off the "px" for you, as well as handle the case where the margin is a keyword.
if you are experienced with relations between javascript and doctype declaration , any help would be appreciated. i use wordpress and i am trying to include cursor script into a page. the script works without default wordpress doctype, with it - it does not. any suggestions how to make the cursor script work, please?
HTML doctype declaration for my WordPress:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Code for cursor:
<STYLE type="text/css">
<!--
.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}
-->
</STYLE>
<SCRIPT language="JavaScript1.2" type="text/JavaScript">
<!-- cloak
//Kissing trail
//Visit http://www.rainbow.arch.scriptmania.com for this script
kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1200 //duration images stay on screen (in milliseconds)
kissSpacer = 30 //distance to move mouse b4 next heart appears
theimage = "cur.png" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd image to be displayed
//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {
posX = getMouseXPos(e)
posY = getMouseYPos(e)
if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
showKisser(posX,posY)
lastX = posX
lastY = posY
}
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageX+10)
} else {
return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
}
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageY)
} else {
return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
}
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
eval("clearTimeout(kissDelay" + curKisser + ")")
}
eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}
function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
document.captureEvents(Event.MOUSEMOVE)
document.onMouseMove = doKisser
} else {
document.onmousemove = doKisser
}
}
window.onload=kissbegin
// decloak -->
</SCRIPT>
<!--Simply copy and paste just before </BODY> section of your page.-->
<SCRIPT language="JavaScript" type="text/JavaScript">
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
}
}
// decloak -->
</SCRIPT>
The script is riddled with very old browser detection code, this could cause it to break in 'newer' browsers with a stricter DOCTYPE.
Try to remove the 'language="JavaScript1.2"' in the script tag. If that doesn't work you'd have to rewrite the browser detection.
The actual script isn't very complicated though so perhaps you could find parts elsewhere and combine them.
You need to do two things:
Hide the cursor (which is done with CSS)
Fetch the mouse position and place your own cursor there (typically an image). For this you will need a script that fetch the mouse position.
Shouldn't be too hard :)