Clicking on the mailicon.gif button (or typing the 'm' key) used open the standard mail program with the To: and Subject: fields already filled out, but this has stopped working.
html:
<img src="mailicon.gif">
css:
a.myMail:active {background:url('mailto:my.address#xmail.com?subject=Some Feedback');}
Nowadays it only adds the # to the url in the browser-addressline, screen stays the same and nothing more happens. How can I restore the old behavior?
Your mailto should be defined on the href (the link), you linked to just #, css is for styling:
<img src="mailicon.gif">
Thanks again for your remarks, and having the ‘mailto’ in the html in principle is the proper way to go if you have only 1 or 2 mailaddresses.
I probably over-simplified my question by just showing the 2 lines of coding. The problem I faced was a bit larger, i.e. not one email address but several. Therefore, a long time ago I implemented what I specified in those 2 lines of coding. In reality I had more than 50 html files and x classes: class=”Anne” class=“Boris”, class=”Charlie” and so on.
Having the mail-addresses in the one css file, used by all html files, made life easy, and it did work, I’m sure of that.
In the meantime css and browsers have evolved, matured and some rules have changed, that’s probably why it is not working anymore.
Nevermind, instead of those 50 html files I now have only 1 html file, 1 javascript file and many JSON files, each containing a short description of a number of photographs. One of the items in there is the name of the photographer.
This name is displayed as an image below the picture, and when one clicks on that image, the program tries to open the default mail-program to send a mail.
It now works as follows in the javascript file:
var emailinfo = '#domain.com?subject=Website%20Fotos%20Feedback';
function HandleKeyDown(e) {
....
else if (e.keyCode == 77) { // m keyboard shortcut to start mail-program
SendEmail();
]
}
function SendEmail() {
if (!copyrightname == '') {
window.open('mailto:'+copyrightname.toLowerCase()+emailinfo);
}
}
function LoadText(elt) {
....
if (elt.copyright) {
copyrightname = elt.copyright; // used later when 'm' is clicked or copyrightmsg is clicked.
temp = '<img src="icons/cr_' + elt.copyright + '.gif" title="Click here to send a mail.">';
$("#copyright").html(temp); // show the image below the picture
}
else {copyrightname = '';}
....
}
$(document).ready(function() {
$(document).keydown(HandleKeyDown);
$("#copyright").click(SendEmail);
....
}
For the time being it works in FF.
IE gives warning that mailprog was not correctly defined, Chrome opens a blank window. These of course are different problems so I’m gonna work on those now.
Hope you now see why I can't have the complete name in the only html file I have.
See it working (in FF) on wijchman.com and then click on the (big) icon with the small pictures.
Thanks for reading so far and your suggestions.
Related
i have an webapp and i need to onclick change css style, but i need to save this change in the webapp instaled into the phone of my user, and only in his phone. The javascript for onclick change css style it's working but i don't have no idea to how to save this css changes.
Can somebody help me with this?
Since now thanks
In general CSS styles can't be directly saved on an HTML client.
What you can do is make an Ajax call back to your server and save the information there. The next time the user asks for the page send HTML with the appropriate style class already on the element you wish to style based on the saved information.
There are several hackish client side possibilities involving JavaScript & cookies or local storage but I would avoid that sort of solution if at all possible since it's very likely to lead to an annoying flicker as the page loads and renders styled one way and then the JavaScript finally runs and corrects the style.
To elaborate on my comment:
el1.addEventListener('click', function() {
el2.style.color = 'red';
localStorage['color'] = el2.style.color;
})
And then on startup:
window.addEventListener('load', function() {
if (localStorage['color']) {
el2.style.color = localStorage['color'];
}
}
Of course, you may want to add error checking and fallbacks as appropriate.
I'm curious to know whether Meteor would be suitable for following, and how I would go about writing the code.
I'd like to create a webpage, where by the code in a specific "div" can be hotswapped on the fly to users currently looking at that page. (eg. the div contains some text, but then an image replaces it.) Ideally, the swap would be executed manually by the the webpage's admin through the click of a button, or some code fired off on the server or something. Regular viewers to the webpage would not be able to do this - they only see the live changes on the page.
real-life example:
live internet broadcast is off-air, therefore the "div" contains "off-air" text. live hotswap of code happens when broadcast goes on-air, and the viewers of the webpage now see the html5 broadcast player in the "div" instead. later it is swapped back once the broadcast goes off-air.
I'm completely new to the Meteor platform, so I consider myself a newbie :) Any help is appreciated.
You might better off by using a reactive div using data from a collection (I'm going to use an example with raw HTML but you might be better off implementing your own functionality with what content to display instead: i.e
Basically take advantage of reactivity over hot code swaps
Client side html code
<template name="home">
<div>
{{{content}}}
</div>
</template>
js code
if(Meteor.isClient) {
MyCollection = new Meteor.Collection("MyCollection")
Template.home.content = function() {
if(MyCollection.findOne()) {
return MyCollection.findOne().content
}
}
}
if(Meteor.isServer) {
MyCollection = new Meteor.Collection("MyCollection")
//Set an initial content if there is nothing in the database
Meteor.startup(function() {
if(!MyCollection.findOne()) {
MyCollection.insert({content:"<h1>Test content</h1><p>Test Data</p>"
}
}
//A method to update the content when you want to
Meteor.methods({
'updatecontent':function(newcontent) {
id = MyCollection.findOne()._id
MyCollection.update(id, {$set:{content:newcontent}});
return "Done"
}
}
You can update your content either in the mongo collection or with something like (in your web console, client side or server side javascript):
Meteor.call("updatecontent","New content",function(err,result) {
if(!err) {
console.log(result)
}
});
Which will update the code live when you use it.
I'm sorry it's quite long but the bulk of it is setting/updating the html. Its actually much nicer than a hot code swap which would refresh the user's page
I have a report generated in html that I would like to prevent certain columns from being included if the report is emailed from the browser. I imagine something along the lines of mediatype screen, print.
Any thoughts?
So if you have a webpage that you want to be altered if it is emailed to someone (i.e., someone clicks a button that says "Share this via E-mail"), then you could add a variable into the url like http://www.somedomain.com/page_to_be_emailed.html#email and then use javascript/jQuery to sense the hashtag and remove the necessary elements like so:
if(window.location.hash) {
var thehash = window.location.hash;
if (thehash == "#email"){
//hide some stuff
$('div.you_want_to_hide').css({'display':'none'});
}
}
I've been playing around with the new media manager in WordPress and had some fun with it, but have reached the point where I'm banging my head against a wall.
I have a custom meta box that I'd like to store some images in (well it's a hidden input and I'm currently storing their ID's, but could equally be the image objects), then making an AJAX call to show some thumbnails, which I have subsequently made draggable so users can reorder (not necessarily relevant just some background).
My problem is that when I open the media manager, no images are selected, so if a user wants to edit the pictures in their gallery they need to select them all again.
What I'm trying to figure out, is how do I open the media manager with the current images passed through so they are pre-selected.
So, broadly, my code looks like this
jQuery('#myButton').click(function(e) {
e.preventDefault();
frame = wp.media({
title : 'My Gallery Title',
multiple : true,
library : { type : 'image'},
button : { text : 'Insert' },
});
frame.on('close',function() {
// get selections and save to hidden input plus other AJAX stuff etc.
}
frame.open();
});
My thought is that there must be either a parameter to pass into the frame (probably a JSON object of the images, or I need to create an event for
frame.on('open', function() {
// Set selected images
}
But I have tried both ways round and am not getting anywhere.
It would appear possible, as changing the 'Featured Image' takes you to the library with the current one selected - I've just been unable to understand the core code sufficiently yet and hope someone else has !
After studying the core for a bit, the answer here is really quite straightforward.
Listen for the open event of the wp.media object, grab the state, create attachment objects with your id's and add them to the selection.
frame.on('open',function() {
var selection = frame.state().get('selection');
var ids_value = jQuery('#my_field_id').val();
if(ids_value.length > 0) {
var ids = ids_value.split(',');
ids.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add(attachment ? [attachment] : []);
});
}
});
This works when selecting multiple images as well as single and assumes that using the code above you have stored the values in a single text/hidden field with comma separation.
not a real answer, but somethings that I have noticed
using your code the frame.open( console.log('open') ) does trigger the console.log.
The other frame.on('open', function() { console.log('on->open')}) does not.
When looking at the post edit page. (Where a featured image is already set).
If you open the featured img window a few things happen that are interesting.
WP does 3 ajax calls, the 1st and 3rst contain the featured img id. the 2nd is the same as with your code.
when the popup is loaded the featured image is visible / loaded before the rest of the images. When those show up the featured image is put in the right order.
When looking in firebug at the dom tab I discovered that the var wp.media.model.settings.post.featuredImageId holds (wait for it) the featured image value.
Hopes this helps you in some way.
I think those guy manage to do it :
https://wordpress.stackexchange.com/questions/76125/change-the-default-view-of-media-library-in-3-5/76213#76213
But this doesn't work for me.
I ve got the jquery in the footer of my post/edit, post/new but that just don't work for me :(
I was looking for any way to create web page,so that user wont be able to copy content from my web page. i.e. User wont be able to select the any text present on the webpage.
Let's assume i am working on asp.net
Any interesting ideas to accomplish the task ?
Ultimately you can't.
If you disable the ability to select text, the context menu or even just the copy option from the context menu users will still be able to see your content.
If they can see it they can copy it:
Take a screenshot.
Take a photo.
Type the text they see into Notepad.
Dictate the text into a recorder.
It's not worth the development effort and you won't stop the determined copier. All you'll end up doing is annoying your legitimate users.
Add value to your site so people want to keep coming back rather than just taking content and running. This could be:
Allow user generated content to expand on what's there.
Update content regularly so it's always fresh.
You can use user-select CSS3 propertie
HTML like this :
<span class="protected">Datas you wants protect</span>
And the correspondant CSS :
.protected {
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
See my example : http://jsfiddle.net/DoubleYo/RPv4q/
This solution is not cross browser but work fine with firefox and chrome/safari
EDIT : advanced user can copy your content with view the page source, make pdf or print your page, and some people mention firebug, fiddler.
If you send down any text the user will be able to see the source, so disabling copy and paste by any method will not really help stop the determined copier.
The most effective approach would be to render your text in to an image on the server and send down the image and not the raw text, but before you do that there are several downsides to consider: 1) You will require capacity on your server to generate the image. 2) The data load will be higher than just text and compresion will be less effective. 3) You may also loose some caching options.
Is there a particular reason you don't want the user to copy the text, perhaps if you can provide more details other approaches may be possible?
Try this
<html>
<head>
<script language="<strong class="highlight">javascript</strong>">
function onKeyDown() {
// current pressed key
var pressedKey = String.fromCharCode(event.keyCode).toLowerCase();
if (event.ctrlKey && (pressedKey == "c" ||
pressedKey == "v")) {
// <strong class="highlight">disable</strong> key press porcessing
event.returnValue = false;
}
} // onKeyDown
</script>
</head>
<body>
<form name="aForm">
<input type="text" name="aText" onkeydown = "onKeyDown()">
</form>
</body>
</html>
When someone visits your website they receive the html/css/images/JavaScript that makes up the bulk of your site. So they already have your Content, as most browsers cache this too, to allow quicker browsing.
Read more on HTTP here - http://www.http.header.free.fr/http.html
So it is not quite possible to totally stop anyone that know how the http protocol works. But what you can do is to maybe listen for right clicks and stop normal end users from right clicking and saving a image etc. You can get a snippet here - http://www.dynamicdrive.com/dynamicindex9/noright.htm
But if you are talking about protecting images/files that are selling please have a look at Protect html/php/image files from tracking as it then applies to your problem.
You can add to your body tag like so:
<body onselectstart="return false">
This is Internet. You can't completely protect the content of the page.
But you can difficult this task for the user.
You can too handle keyboard and mouse inputs, like Ctrl+C or right click of the mouse.
But remember that the user can always see the source code of the page, copy it and paste on a HTML editor.
You can make your site in Silverlight or Flash, but this will "disable" search engines indexing.
convert your page into a image
You can disable the selection, and with out selection you do not have copy/paste, however I suggest do that only on some parts of your page because is frustrate for the user.
This is the simple code that you can do that, eg, if you have a div with id="notme", run the disableSelOnThis("notme");
function disableSelOnThis(IdName) {
var oElem = document.getElementById(IdName);
if (oElem)
disableSelection(oElem); }
function disableSelection(element) {
element.onselectstart = function() {
return false;
};
element.unselectable = "on";
element.style.MozUserSelect = "none";
element.style.cursor = "default";
}
The code was from : http://ajaxcookbook.org/disable-text-selection/ , but its seams that this site is not longer live.
Of course without javascript enable this is not working and everything ChrisF says still stands.
Just copy and Paste the below javascript in your webpage:
<script language="javascript" type="text/javascript">
function disableselect(e) {
return false
}
function reEnable() {
return true
}
document.onselectstart = new Function("return false")
if (window.sidebar) {
document.onmousedown = disableselect // for mozilla
document.onclick = reEnable
}
function clickIE() {
if (document.all) {
(message);
return false;
}
}
document.oncontextmenu = new Function("return false")
var element = document.getElementById('tbl');
element.onmousedown = function () { return false; } // mozilla
</script>
Note:If the above code not works for Firefox then add style="-moz-user-select:none" in the body tag which needs to be restricted alongwith the above code.