im currently creating a site where i want people to be able to change the background image. i have the script to change working just fine, but i'd like to include a "remember" feature.
here's my javascript code:
$(document).ready(function(){
var body = $(document.body);
$('#backgrounds').bind('change', function(event){
var bg = $(this).val();
if(bg == null || typeof bg === 'undefined' || $.trim(bg) === '')
body.css('background-image', '');
else
body.css('background-image', "url('" + bg + "')");
});
});
how would i add a "remember" feature to this?
You can store the background URL in the local storage if you're only targeting modern browsers.
Where you've declared var bg = $(this).val(), add a newline beneath it that should be like localStorage.setItem('bg', bg);.
Then underneath var body = $(document.body);, write: if( localStorage.getItem('bg') ) { body.css('background-image', "url('" + localStorage.getItem('bg') + "');"); }.
Related
I have tried numerious different approaches to my problem, but none of them seem to work out. I basically activate and deactivate users using a asp.net hyperlink and the problem is as soon as you do that, the page scrolls back up because of the postback it creates, so it will be annoying to scroll back down if you have a list of 1000 users. Here is the code iv'e been trying out without success!
// I use this variable for navigating the url for my hyperlink
var toggleUrl = "AdminListUsers.aspx?column=" + (IsClicked.FirstOrDefault().Key ?? "Name") + "&direc=" + (IsClicked.FirstOrDefault().Value) + "&a=chstat&q=" + id.ToString() + "&d=" + disabled + "&z=" + Server.UrlEncode(txtSearchFor.Text);
var hl = new HyperLink(); //These hyperlinks are the same
hl.Text = status;
hl.Style.Add(HtmlTextWriterStyle.Color, (disabled ? "red" : "green"));
hl.NavigateUrl = toggleUrl;
hl.Attributes.Add("onclick", "saveScroll(this);return true;");
cell.Controls.Add(hl);
tr.Cells.Add(cell);
cell = new TableCell();
cell.Width = new Unit("10%");
cell.Controls.Add(new LiteralControl("<nobr>"));
var linkbtn = new HyperLink //These hyperlinks are the same
{
//Here as you can see are my attributes for the hyperlink
NavigateUrl = toggleUrl,
Width = 16,
Height = 16,
CssClass = disabled ? "user-status-disabled" : "user-status-enabled"
};
linkbtn.Attributes.Add("id", "aButton_" + id);
ScriptManager.RegisterStartupScript(Page, typeof(Page), "ScrollToADiv", "setTimeout(scrollToDiv, 1);", true); // Not working
linkbtn.Attributes.Add("onclick", "window.scrollTo(0, location.hash);"); // Not working either
cell.Controls.Add(linkbtn);
cell.Controls.Add(new LiteralControl(" "));
As per my understanding, you could set the MaintainScrollPositionOnPostback to true in any of the below three ways.
Web.config Level => pages maintainScrollPositionOnPostBack="true" />
Page Level => <%# Page MaintainScrollPositionOnPostback="true" %>
Code Level => Page.MaintainScrollPositionOnPostBack = true;
Hope this Helps!!
EDIT
Code help for the comment below (assuming jQuery is being used):
$(".user-status-enabled").on("click", function() {
var $this = $(this);
var scrollPosition = $this.scrollTop();
$this.attr("href", $this.attr("href") + "&scrollPosition=" + scrollPosition);
});
And on the target screen, access this scrollPosition from Query String and set the scroll position on dom Ready
I want to embed a page developed by me using AngularJS into another third-party page (that may/may not be using AngularJS). To the third party it should be just as simple as adding a small piece of code - just like what they do to embed tweets from Twitter or add a comment box from Facebook.
I tried using <iframe>, but when my page is larger than iframe's size, scroll bars appear which I don't want. How to embed my page so that scroll bars don't appear and it appears that the embedded page is part of the original third-party website?
The embeddable page contains something similar to tweets/Fb comment box.
PS: Assume I have no control over the third-party sites.
PPS (to avoid the confusion): I control the content of the embeddable page i.e. I have control over what's there inside the iframe. But I don't have any control over the page where this iframe will be put. I need a piece of code (JS/html) which can be given to others so that after they add this piece of code, they will have my content in their page.
A very basic example, all credit goes to giveforward.com:
<script type="text/javascript" src="https://www.giveforward.com/widget.js">
</script>
<script type="text/javascript">
BuildWidget('c8c3');
</script>
the included javascript file simply defines a couple of functions and writes it's own iframe to the page.
function BuildWidget(fid)
{
makeFrame(fid);
}
function makeFrame(fid)
{
document.write('<iframe frameborder="0" scrolling="no" src="https://www.giveforward.com/widgets/w/'+fid+'/?m=1" style="min-width: 240px; width:100%; max-width:295px; height: 450px;margin:auto;display:block;"></iframe>');
}
function BuildAffiliateWidget(affid, packet) {
if(typeof packet == 'object')
{
refid = (typeof packet.refid == 'undefined') ? '' : '&refid=' + packet.refid;
category = (typeof packet.category == 'undefined') ? '' : '&category=' + packet.category;
title = (typeof packet.title == 'undefined') ? '' : '&title=' + encodeURIComponent(packet.title);
callback = (typeof packet.callback == 'undefined') ? '' : '&callback=' + packet.callback;
gfid = (typeof packet.gfid == 'undefined') ? '' : '&gfid=' + packet.gfid;
}else
{
refid = title = category = callback = gfid = '';
}
document.write('<iframe frameborder="0" scrolling="no" src="https://www.giveforward.com/widgets/a/?m=1&affid=' + affid + refid + category + title + callback + gfid + '" style="min-width: 240px; width: 100%; max-width:295px; height:450px;margin:auto;display:block;" class="affiliate_iframe"></iframe>');
}
The url that the iframe points to can be the same url that you are having your users embed to their own iframe now.
Thanks to #TheGunner for pointing me in the right direction. But he didn't specify the resizing part. So if the embedded page is bigger than the iframe then scroll bars would appear. To prevent this, you can call window.PostMessage from the embeddable page and the listener will take care of the resizing part.
I have created a script which assigns dynamic id to the iframe, and this id is used later to resize.(My script takes care only the height of the iframe. If the embeddable page is responsive, width shouldn't be a problem).
Here is the content of widget.js (this contains the window.PostMessage listener and the code to create iframe):
(function() {
var func = function(e){
if (e.data.indexOf('iid:') === 0) {
var hashPos = e.data.indexOf('#');
var iid = e.data.substring('iid:'.length, hashPos);
var height = e.data.substring(hashPos + 1) + 'px';
document.getElementById(iid).style.height = height;
}
};
var old = window.onmessage;
if (typeof window.onmessage != 'function') {
window.onmessage = func;
} else {
window.onmessage = function (e, f, g, h) {
if (old) {
old(e, f, g, h);
}
func(e);
};
}
}());
var BuildWidget = function(url, width) {
var getNewIid = function() {
return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
};
var iid = getNewIid();
if(!width) {
width = 900;
}
var maxWidth = width + 'px';
document.write('<iframe id="' + iid + '" src="' + url + '?iid=' + iid + '" frameborder="0" scrolling="no" style="min-width: 300px; width:100%; max-width:' + maxWidth + '; display:block;"></iframe>');
};
var AddXWidget = function(width) {
var url = 'http://localhost:8080/embed';
BuildWidget(url, width);
};
Now give out the following script to third-party sites to enable them to embed your widget:
<script type="text/javascript" src="http://path/to/widget.js">
</script>
<script>
AddXWidget(400);
</script>
Now, the embeddable page(the page inside iframe) should call window.PostMessage() as follows:
window.top.postMessage('iid:' + iid + '#' + elem.scrollHeight, '*');
Here iid is the URL parameter iid obtained and elem is the element looked up using document.getElementById()
What I am trying to do below since I don't have access to the PHP to my site, I am using this code to work around it. It will search for any links containing the two listed below. one from youtube with the /watch? in it and the other from youtube with just the /v in the url. It also is searching the any embedded elements. Problem is when I run the script it breaks all the other codes because of the error.
Uncaught TypeError: Cannot call method 'replace' of undefined
Which is a pain in the butt! So I took it over to FF, says variable WT is not defined clearly it is though. Well it may not be since I used it outside the scope of the if statement. I'm not sure how to ensure if the link exist run the code. As well as if the Embed exist run the code too. These will be in my users post and want them automatically changed to work with my fancybox.
Here is a live example
Its the copied markup from my page with a quick linked CSS so don't mind the buggy look.
$(function() {
//if link contains /watch?
var t = $('.entry-content div div a[href*="youtube.com/watch?"]').attr('href');
if(typeof t !== "undefined") {
//do nothing don't run the script below
} else {
var d = $('.entry-content div div a[href*="youtube.com/watch?"]');
var newsrc = t.replace('watch?','');
var asrc = newsrc.replace('=','/');
var g = asrc.replace('http://www.','http://img.');
var s = g.replace('v','vi');
d.attr('class','ez_video');
d.attr('href', asrc).html('<img src="'+ s +'/0.jpg"/>');
}
//if link contains /v
var wt = $('.entry-content div div a[href*="youtube.com/v"]').attr('href');
if(typeof wt !== "undefined") {
//do nothing don't run script below
} else {
var wd = $('.entry-content div div a[href*="youtube.com/v"]');
var o = wt.replace('http://www.','http://img.');
var v = o.replace('v','vi');
wd.attr('class','ez_video');
wd.attr('href', v).html('<img src="'+ v +'/0.jpg"/>');
}
//if embeded file
var src = $('.entry-content').find('embed').attr('src');
if (typeof src !== "undefined") {
//do nothing again unless true run script below
} else {
var qload = src.replace('http://youtube.com/v/','');
var y = src.replace('http://','http://img.');
var imgsrc = y.replace('v','vi');
$('embed').before('<a class="ez_video" id="'
+ qload +'" href="'+ src +'"><img src="'
+ imgsrc +'/0.jpg" tile="" alt=""/></a>');
$('embed').remove();
}
//Now make all work with the fancybox
$('.ez_video').fancybox({
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width' : 854,
'height' : 480,
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
});
You are comparing it to a string of undefined while you should compare it the actual reserved word:
if(typeof wt !== undefined)
You can also do:
if(wt !== "undefined")
BTW, what you are doing is, if it is not undefined - do nothing, else - do something, is this really what you want?
I would like to change the url of the page when the user select another page to visit. The url is dynamically replace the original one.
eg.
If user visit page 1 , the url will be book.html?page=1
If page 30 then book.html?page=30 and so on.
However, when I change the link using javascript, it falls into a infinite loop.
It seems I keep visit->change link ->visit ->change link->.... How to fix this problem?
eg. When the link change, don't access the page.
var currURL = $(location).attr('href');
var index = currURL.indexOf('?');
currURL = currURL.substring(0, index != -1 ? index : currURL.length);
// fall into loop
$(location).attr('href', currURL + '?page=' + pageNo);
You can do this pretty easily with just standard javascript.
if(location.href.indexOf('?') !== -1 && location.href.indexof('?page=') === -1)
{
var urlArray = location.href.split('?');
var newURL = urlArray[0] + "?page=" + urlArray[1];
location.href = newURL;
}
I found the following JS online, which functions like:
If an image is clicked, open the image in new window and prompt for print. Once printed the window closes. I need this script modified to click a print link it prints an image then closes the new image window. So I want to change from clicking the image itself to clicking a link that says print image.
Here is the code:
<script type="text/javascript">
/* <![CDATA[ */
function makepage(src)
{
// We break the closing script tag in half to prevent
// the HTML parser from seeing it as a part of
// the *main* page.
return "<html>\n" +
"<head>\n" +
"<title>Temporary Printing Window</title>\n" +
"<script>\n" +
"function step1() {\n" +
" setTimeout('step2()', 10);\n" +
"}\n" +
"function step2() {\n" +
" window.print();\n" +
" window.close();\n" +
"}\n" +
"</scr" + "ipt>\n" +
"</head>\n" +
"<body onLoad='step1()'>\n" +
"<img src='" + src + "'/>\n" +
"</body>\n" +
"</html>\n";
}
function printme(evt)
{
if (!evt) {
// Old IE
evt = window.event;
}
var image = evt.target;
if (!image) {
// Old IE
image = window.event.srcElement;
}
src = image.src;
link = "about:blank";
var pw = window.open(link, "_new");
pw.document.open();
pw.document.write(makepage(src));
pw.document.close();
}
/* ]]> */
</script>
<img src="fortune.jpg" onclick="printme(event)" />
I do not know any JS so I apologize. I only do php/mysql.
Best Regards!
Jim.
<img src="someurl.jpg" id="imgid' />
Print the image
function printme(id)
{
var src = document.getElementById(id).src;
var link = "about:blank";
var pw = window.open(link, "_new");
pw.document.open();
pw.document.write(makepage(src));
pw.document.close();
}
In the old method, the printme function knows what image should be printed: the same image that was clicked; when you change the trigger, you need to tell the function explicitly what image you want to print. That is why we are adding an id to the image and pass it to printme function. But if you only have one image on the page, or if a spacial relation exists (like the link always being the immediate next node after the image), then we can do it differently and need no id.
I don't know what your link looks like, but assuming it's just a plain anchor:
Change from:
<img src="fortune.jpg" onclick="printme(event)" />
To:
<img id="printableImage" src="fortune.jpg" onclick="printme(event)" />
<a href="javascript:void(0);" onclick="printme('printableImage')" />
Then alter the printme() function to retrieve the image src from the passed in image element id (jQuery makes this easy):
function printme(printableImageId)
{
var src = $('#' + printableImageId).attr('src');
// the rest of the logic...
}
You'll need to modify the printMe function a bit, doing this should fix it:
function printme(evt)
{
if (!evt) {
// Old IE
evt = window.event;
}
var anchor = evt.target;
if (!anchor) {
// Old IE
anchor = window.event.srcElement;
}
src = anchor.href;
link = "about:blank";
var pw = window.open(link, "_new");
pw.document.open();
pw.document.write(makepage(src));
pw.document.close();
return false;
}
And then on your actual anchor you would do the following:
Print