I want to embed this Javascript snippet (webform from AWeber) into my website:
<script type="text/javascript" src="http://forms.aweber.com/form/49/522310949.js"></script>
My site uses the style p { line-height: 1.5em; }. Unfortunately this is also applied to the Javascript snippet and makes it look stupid.
How can I tell the Javascript snippet to use a line-height of 1em instead of 1.5em?
I tried this but it doesn't work:
<p style="line-height: 1em;">
<script type="text/javascript" src="http://forms.aweber.com/form/49/522310949.js"
</script>
</p>
I also considered using Javascript (document.getElementById('p').style.lineHeight = '1 em';) to change the CSS, but as I understand Javascript modifies the whole website and not only one element...
Can you please help?
Thanks in advance!
div.af-form {
line-height: 1em;
}
In case you need more styling, I see that your generated block also uses these styles: af-header, af-body, af-footer, af-element and af-textWrap.
However, if you need a more universal solution, refer to #Pointy's answer.
Putting the form inside a <p> does not make sense, as <p> cannot contain block-level elements. Use a <div> instead:
<div style='line-height: 1em;'>
<script src = " ... "></script>
</div>
As #Max implicitly noted, it'd be "nicer" to add CSS to style the content.
You can use Firebug or the Chrome/Safari developer tools to examine the styles of "live" page elements. That can help you figure out the reasons that particular elements look a particular way, and it also lets you play around with alterations to the styles.
edit maybe something like:
div.af-form p { line-height: 1em; }
Related
I'm learning to code with bootstrap, html, css, js. And I'm wondering if it's possible to modify the language of my webpage with a toggle button?
I'm using bootstrap toggle which can set events like this:
<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
And I also saw this thread on stack about changing languageusing element.lang.
And I'm not able to 'mix' the two methods to change the language on deman simply by clicking on the toggle button, and I don't understand why =/
Here's my attempt:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-toggle.min.js"></script>
<body class="fr" id="test1">
<p lang="en">
Je parle la baguette
</p>
<p lang="fr">
I speak the baguette
</p>
<input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="Fr" data-off="En">
<!--<script>
$(function() {
$('#toggle-event').bootstrapToggle({
on: document.body.className= 'fr',
off: document.body.className = 'en'
});
})
</script>-->
<script>
$(function() {
$('#toggle-event').change(function() {
$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
});
});
</script>
</body>
CSS:
body.en :lang(en) {
display: none;
}
body.fr :lang(fr){
display: none;
}
https://jsfiddle.net/mttkchfc/1/
There are a number of issues with your attempt.
The most obvious one is that the languages are the wrong way round. Your "en" section contains French text, and the "fr" one contains English text!
The CSS is also mangled compared to the example you cited - look more carefully at how the :lang part is constructed in the original. In the original example, it is used to hide the opposite language, whereas you're using it to hide the same language. You've got the concept the wrong way round.
Also, this line is total nonsense:
$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
There's no such jQuery function as ".body" - if you look in your browser console (press F12, if you didn't know, to open the Developer Tools in most modern desktop browsers), you'll see this error reported when you click on the toggle.
"classname" is a native JS property, it doesn't work on jQuery objects, which this would be if it was valid
If it was possible to use a function like "body" to set the body content, all it would do is set the content of the whole <body> section to "Toggle: true", or similar. This would be useless.
Even if all of that were to be ignored, and it were capable of setting the class, it only ever sets it to English - you wouldn't be able to change back to French.
The example in the link you gave, using document.body.className works perfectly well. You just need to vary the class name depending on whether the toggle is on or off. I have chosen to store the class names in data- attribute values "true" and "false", which of course correspond to the string representation of a boolean. This means we can neatly use the value of the "checked" property of the toggle to fetch the correct data- attribute value and use that as the new class name, without any tedious if or switch statements:
CSS
body.en :lang(fr) {
display: none;
}
body.fr :lang(en){
display: none;
}
HTML
<body class="en">
<p lang="fr">
Je parle la baguette
</p>
<p lang="en">
I speak the baguette
</p>
<input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="English" data-off="French" data-true="en" data-false="fr" >
</body>
JS
$(function() {
$('#toggle-event').change(function() {
document.body.className = $(this).data($(this).prop("checked").toString());
});
});
P.S. Your JSFiddle didn't work at all because you didn't include jQuery, your scripts were in the wrong section, and you have to reference bootstrap etc as external resources - the inline links you provided were pointing to local resources which don't exist in a JSFiddle environment. I've fixed that for you, plus updated it so it works as you intend:
https://jsfiddle.net/mttkchfc/4/
This is sort of a condensed version of the code, the real version is too long to post but this is enough to represent the concept. I am using this to switch guitar diagrams based on several choices represented by anchors with the corresponding id in the href="". After spending several days getting it to work just right on a static html page, the script won't work in a Wordpress page which is where I intend to use it. I have tried it with the script in the head or inline (which shouldn't matter) - but either way it will not function. I know that Wordpress and certain plugins use Jquery so there may be a version mismatch causing conflicts. I am not (yet) an expert in javascript but I know there are several ways to skin a cat as the saying goes, I just need to find one that plays nice with Wordpress. Any help would be greatly appreciated...
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var divswitch = $('div.diagram_container a');
divswitch.bind('click',function(event){
var $anchor = $(this);
var ids = divswitch.each(function(){
$($(this).attr('href')).hide();
});
$($anchor.attr('href')).show();
event.preventDefault();
});
});
</script>
<style>
.diagram {
margin: 0;
width: 100%;
}
.diagram_container {
width: 100%;
}
</style>
<div id="RH_RW_Div" class="diagram_container" style="float:left; display:block;">
<div class="diagram_menu">
<a class="checked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="unchecked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/RH_RW.gif' /><br />
</div>
<div id="LH_RW_Div" class="diagram_container" style="float:left; display:none;">
<div class="diagram_menu">
<a class="unchecked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="checked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/LH_RW.gif' /><br />
</div>
Wordpress uses by default jQuery.noConflict(). This is to assure that there is no conflict by other libraries using the $ variable. That's why your console says it's not a function.
However, obviously, the jQuery variable still works, and you should use that, and passing to your function the $ variable yourself to enable the shorthand version of jQuery.
So your code should look like this:
jQuery(document).ready(function($){
// Your functions go here
});
My guess is that your Wordpress install or a plugin is already loading up jQuery in the head. Check to see if it exists there, and if it does, don't call it again.
If that doesn't do it and you have this site online, send me the link and I'll take a look.
Calling jQuery twice will often lead to problems. There is also a proper way to load jQuery and override the Wordpress version if you specifically need 1.8.3 (wp_register_script and wp_enqueue_script), but I don't think you need to go down that route yet.
I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.
I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...
This is confusing, what is the proper way to implement my image button?
Thanks.
P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.
The proper way largely depends on what the button will do if JavaScript is not available.
If you are going to submit a form then:
<button> <img src="..." alt="..."> </button>
If you are going to go to a URL then:
<img src="..." alt="...">
If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):
<button type="button"> <img src="..." alt="..."> </button>
You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.
Create a button and put background-image for it.
Checkout the fiddle.
http://jsfiddle.net/siyakunde/Y38nz/
I found the solution after many struggles: http://jsfiddle.net/YRY8M/3/.
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
And some javascript:
function doSomething() {
alert('Hello!');
}
It depends on what you want to do in every case. There is no guideline that says "you should do it like this", but there are situations that some cases are more suitable than others.
For example according to this review, IE versions of 8 and below have some buggy behaviour regarding <button> tag when trying to use it as a submit button.
Ηowever the <button> has some new attributes added in HTML5 which you can see here , ammong them is autofocus and other useful that will be supported by most modern major browsers.
In your case that you want to maintain the "focus" (i assume with tabbing support), if you use a single <image> as a button (with or without <a>), you will have to add some JS code to make the image focusable when the appropriate tab is pressed. So you will have to write a bit more code to do the same thing.
There is one more solution which might be suitable for you, since you do not need to submit the form to server side. Using the <input type="image" type and defining the src attribute inside it, will be focusable and not require neither any JS code to run nor any difficult CSS. You can find more about it's syntax here
So, it ends up to you to decide which one of all them to use.
I would use the one that i find more flexible, easier for me to code, easily reusable and is supported by most of my target browsers.
Use jQuery as you own it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#theBtn{
margin: 20% auto 0;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="theBtn"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#theBtn").click(function(){
if(confirm('Are you sure?')){
$("#theBtn").fadeOut('slow');
}
});
});
</script>
</body>
</html>
Inside a <button> tag , put your image, and attach an click event to <button> to open the dialog on click.
JSFiddle
First thing, There is either an image or a button. But not both.
I would say, create an image and place your code in the onclick() function of that image.
var img= $("#my-image-id");
image.click(function() {
// your code here
}
As I know You can't change the look of the Safari buttons thats why I suggest to use a for the solution. Here is my simple code: http://jsfiddle.net/djgBK/1/
The basis is:
Take an a element put the link content to the left,
Then replace it with image that is actualy it's background. Becouse it's a element user can select it usin only TAB button.
What's more using an a elemet will let You to put title which will be displayed after hovering/entering over the button.
I have some HTML with CSS and one instance where I used a custom HTML tag instead of <p> it shows up and my CSS picks up the tag and another where it fails to show the text. If I replace
<title>Layout Controls</title> with <p>Layout Controls</p> it shows up.
I've put a demo up on JSfiddle. THe JS works in my browser and Coda2 but not in JS fiddle. I'm probably doing something wrong as far as fiddle is concerned too if anyone can point out what that is to me.
If there are any best-practice comments people care to make that's fine by me too, here to learn.
<body>
<div class="input_group_box">
<title>Layout Controls</title><br />
<sub-title>X-Position</sub-title><br />
<input id="/layout/1/slider" class="slider" type="range" value="0" min="-1" max="1" step="0.001" onclick="bind('/layout/1', 'slider', parseInt(this.value*1000)/1000)" />
<input id="/layout/1/number" class="number-box" type="number" value="0" min="-1" max="1" step="0.01" onclick="bind('/layout/1', 'number', parseFloat(this.value))" /><br />
</div>
</body>
Anybody no why my Javascript isn't binding the two inputs in the demo. Could it be I need to change the JSFiddle load settings I'm in the dark a bit with that.
There are several problems with using custom tags, see e.g. Using custom HTML Tags. They would make coding a little easier, but mostly it’s not a good idea. Use classes instead, such as <div class=sub-title>...</div>. But if something is a heading, consider using heading markup for it, like h2 and h3. For form fields, you could use legend inside a fieldset, too.
The title element is a different case, since it has always been defined in HTML and has a special role and processing. It is allowed in the head part only. If you put it inside the body, the effect depends on the browser.
<title> is MTML5 tag, not custom tag.
Try this on it's CSS. It will be fine:
title {
font-size: 16px;
font-family: HelveticaNeue-Bold, sans-serif;
display: inline;
}
I suspect <title> tag is reserved for page title and you should not be using it for any other purpose...
I have a div with id="div_register". I want to set its width dynamically in JavaScript.
I am using this following code:
getElementById('div_register').style.width=500;
but this line of code isn't working.
I also tried using the units px like the following, still no luck:
getElementById('div_register').style.width='500px';
and
getElementById('div_register').style.width='500';
and
getElementById('div_register').style.width=500px;
but none of this code is working for me.
I don't know what's going wrong.
I am using Mozilla Firefox.
EDIT
<html>
<head>
<title>Untitled</title>
<script>
function show_update_profile() {
document.getElementById('black_fade').style.display='block';
//document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= '500px';
//alert('kutta');
document.getElementById('div_register').style.display='block';
document.getElementById('register_flag').value= 1;
document.getElementById('physical_flag').value= 0;
document.getElementById('cultural_flag').value= 0;
document.getElementById('professional_flag').value= 0;
document.getElementById('lifestyle_flag').value= 0;
document.getElementById('hobby_flag').value= 0;
//alert(window.innerWidth);
}
</script>
<style>
.white_content {
display:none;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
</div>
<div id="div_register">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
The properties you're using may not work in Firefox, Chrome, and other non-IE browsers. To make this work in all browsers, I also suggest adding the following:
document.getElementById('div_register').setAttribute("style","width:500px");
For cross-compatibility, you will still need to use the property. Order may also matter. For instance, in my code, when setting style properties with JavaScript, I set the style attribute first, then I set the properties:
document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";
Thus, the most cross-browser compatible example for you would be:
document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';
I also want to point out that a much easier method of managing styles is to use a CSS class selector and put your styles in external CSS files. Not only will your code be much more maintainable, but you'll actually make friends with your Web designers!
document.getElementById("div_register").setAttribute("class","wide");
.wide {
display:block;
width:500px;
}
.hide {
display:none;
}
.narrow {
display:block;
width:100px;
}
Now, I can easily just add and remove a class attribute, one single property, instead of calling multiple properties. In addition, when your Web designer wants to change the definition of what it means to be wide, he or she does not need to go poking around in your beautifully maintained JavaScript code. Your JavaScript code remains untouched, yet the theme of your application can be easily customized.
This technique follows the rule of separating your content (HTML) from your behavior (JavaScript), and your presentation (CSS).
These are several ways to apply style to an element. Try any one of the examples below:
1. document.getElementById('div_register').className = 'wide';
/* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';
Fix the typos in your code (document is spelled wrong on lines 3 & 4 of your function, and change the onclick event handler to read: onclick="show_update_profile()" and you'll be fine. #jmort's advice is good - simply set up 2 css classes that you switch between in javascript - it'll make things easier.
You might also check out element.addEventListener for assigning event handlers to your elements.
The onclick attribute of a button takes a string of JavaScript, not an href like you provided. Just remove the "javascript:" part.
If you remove the javascript: prefix and remove the parts for the unknown ids like 'black_fade' from your javascript code, this should work in firefox
Condensed example:
<html>
<head>
<script type="text/javascript">
function show_update_profile() {
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= "500px";
document.getElementById('div_register').style.display='block';
return true;
}
</script>
<style>
/* just to show dimensions of div */
#div_register
{
background-color: #cfc;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="show_update_profile();" value="show"/>
</div>
<div id="div_register">
<table>
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
Be careful of span!
myspan.styles.width='100px' doesn't want to work.
Change the span to a div.
You have to use document. The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content,
know more
document.getElementById('div_register').style.width='500px';