I wanted to have a message pop up in the middle of the page of my website when there is a important announcement like the one below. Any ideas of what to use. I tries looking at the code but I have no idea how to get it to work. Any ideas will be appreciated.
Image (My Idea of how it should look)
It looks like you have tagged 'javascript' on this question, so I will show you the most common way to do it completely using javascript.
Use the alert() function. The alert function takes one parameter — the text that you want to show. All browsers will present this in a different way. This is really easy to do and is recommended especially if you are just starting.
An example of implementing this on your HTML website:
<script type="text/javascript">
alert('My message goes here');
</script>
If you want to change the way this looks, you will have to use an HTML modal. By using that, you can customize the HTML&CSS to look exactly like the picture you attached.
To get started with that, I recommend you check out W3Schools tutorial on this: https://www.w3schools.com/howto/howto_css_modals.asp
Related
I'm currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)
I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.
I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!
Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/
Try updating the content of the iframe like this.
// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);
By directly updating the iframe DOM like the way you are doing may not be the right way .
I have a button on my cover page and I need to assign to it 1 line of javascript code (namely javascript:languageClicked(0); to work with this neat addon: Multilingualizer) .
So the button should execute that line of code and do its usual job, namely to send the user to my main webpage.
thx in advance
Is the languageClicked function code from Multilingualizer? If so, maybe that addon isn't enabled correctly on your page or something and the js files for it are not being loaded.
But, once they are loaded. You can replace your button with this code:
ENTER
Screenshot
Since you want the user to be redirected to /expnew after activating languageClicked.
Hope this helps! Also, there is one catch though; don't change this unless you know for sure you have those JS libraries loaded. ^_^
Without some HTML snippets and the name of the button you are working with, it is hard to know exactly how to help. However, I can share some general knowledge that may provide the answer for you.
The two most common ways that JavaScript triggers are implemented are:
1. <a> "link buttons":
Your code might look something like:
Click me!
2. <input>/<button>/any element onclick events:
Your code might look something like:
<button onclick="javascript:languageClicked(0)">Click me!</button>
I'm trying to create a voting/polling system and I want to make sure my idea is even possible before I dig in. I really like how the Colorbox examples look and work for a "popup" window/display, and I'm also really interested in this jqBarGraph plugin for displaying voting results. What I'd like to do when the user votes, is have the Colorbox "popup" come up and have the animated bar graph show up inside. I'm not sure how this would be implemented because in the examples of jqBarGraph that I've seen, the "graph" gets hooked up to a <div> tag or some other element. I know you can set up inline HTML in the Colorbox so maybe I would need to set up my <div> element with that, and then have the jqBarGraph use it?
So my question is: Is it possible to 1) Execute javascript when initializing my Colorbox (maybe in onOpen:function(){ ?) and 2) Is there a (easy?) way to display an instance of jqBarGraph inside my Colorbox popup?
Here is my (pseudo) code example so far of how I see this maybe working:
//This would happen in my bntVote click event?
$(".btnVote").colorbox({width:"50%",
inline:true,
href:"#myGraph",
function(){
var arrayOfData = new Array(
[[75],'voter 1'],
[[25],'voter 2']);
$('#myGraph').jqBarGraph({ data: arrayOfData });
}});
<div id="myGraph" style="display:none;"></div>
The idea for the function() above in my code sample where I'd like to execute the javascript for the jqBarGraph, came from here. I'm also open to any other suggestions, I just think these two plugins look very slick and would love to be able to implement them together.
Also, for what it's worth, I'm using VB.NET (.NET 3.5) and VS2010.
Many thanks in advance!
I think you already have all the pieces you need. Colorbox does support using inlined content, so your graph div would go there, and if you need to do any initialization when Colorbox opens, you can specify that in the onOpen function.
We've all seen this:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
But my question is, how does this actually work, surely if this code isnt in the source code, how does it have any effect when entered into the address bar?
Putting javascript: <anything> as a link or into the address bar will basically run the given piece of JS.
Instead of onclick or onmouseover you can just put Test if you really wanted.
The javascript: prefix instructs the browser to execute a script, rather than follow a link.
You probably know that you can alert a message like this:
Click me
Now, entering javascript:alert('test'); in the address bar of the browser is the exact same thing as following that link. Hence the code will be executed. It's a feature =)
It is a HTML5 specification and can be applied in the page itself or via adressbar like every javascript code... like a javascript bookmarklet from twitter.
Reference:
http://www.w3.org/TR/html5/editing.html#contenteditable
I really don't know how to describe it, but if you understood it and had experience on that field, may be you can help me with something 'Open Source' and 'Ready-made'.
I want to create something like a box 'or widget', where you can change its content by hitting some buttons on the top of the box. (Hey the box is on a web page and this should use Ajax and Javascript).
I have tried some ready scritps, but I found them limited and they drive me crazy, JS frameworks also don't seems to offer such solution.
Any body have any idea on that field?
Just because the box is on a Web page doesn't mean it should use AJAX, Omar. Have you thought about using a third-party solution like ClearSpring or WidgetBox? If you need to put your widget onto Myspace, you'll want one of these.
That said, I've taken a couple of JavaScript-only runs at this problem; see Twitterati and Put Your Digg In A Box for examples, and my Global Widget Summit presentation for explanations.
Have you tried Jquery?
Visit www.jquery.com
Some example can be found at
http://www.openjs.com/scripts/events/keyboard_shortcuts/
Also please check the In-place editing example at
http://www.appelsiini.net/projects/jeditable
http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax