So I have this HTML code, it displays a twitter feed.. The only problem is, it flows off the page. I would like the feed to be 100% width and 600px height. I've fiddled with this for a while, and can make it work somewhat.. I think it needs to be one single code.
https://jsfiddle.net/33nw5jcd
<div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
appreplicaapp = 'twitter';
appreplicaapikey = 'aa869d1f61a088e04e6fe1a66fc07933e404f9bb';
</script>
<script src="//api.appreplica.com/js/1/arc.js"></script>
</div>
Try this:
CSS
#a {
height: 600px;
background-color: #fff;
width: 100%;
}
#a::after {
content: 'hello this is the last node';
}
HTML
<div id="a">
</div>
Note: Try keeping your script after the element with id a. It may be a issue where your script executes before your element is rendered.
Related
I have a div and I'm trying to shrink it when I click a button. And when I click it again, I want it back to the original size. I'm using toggleClass for this, but I did something wrong with my code, and I'm not sure where. Please take a look. Thanks.
//*********************************************************************
<style>
div {
border: 1px solid black;
width: 500px;
height: 500px;
}
.shrink {
width: 250px;
height: 250px;
}
</style>
//*********************************************************************
<button type = "button"> click me </button>
<div> Can you tell me a secret? </div>
//*********************************************************************
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready($function {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
</script>
//*********************************************************************
It's kind of a typo. You wrote "$function {" but you probably mean this:
$(document).ready(function() {
The rest is fine.
Also, document ready can be expressed in a shorter form:
$(function() {
...
...
});
Maybe you just confused those two. I did a few times too, back in my beginner days :)
Here: the jQuery ready method takes an anonymous function as an argument... so te problem with your code was only to pass that function function(){}
Here you can see the code in action: http://jsfiddle.net/leojavier/41wmck17/
$(document).ready(function() {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
I do need to display a content which position to fixed in the bottom of every pages on my site, like this.
<div class="footer-fix">
<p>This is its contents......</p>
</div>
.footer-fix {
background:#fff;
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
}
My question is if I have a lot of pages in my site. So do I need to add this code in almost every webpages or is there any other way to do it without adding this code in every pages?
Hope somebody may help me out.
Thank you.
demo: http://jsfiddle.net/qz94zkmm/
first all, yes you can do it in jQuery. But not recommended!
Here's a function it can dynamically insert html & css styles into an element:
function appendHtmlTo(where, htmlText, cssText) {
$(where).append(htmlText).append('<style text="text/css">'+cssText+'</style>');
}
and call this function:
appendHtmlTo('body', html, css);
which variables html and css define like this (there is a backslash at the end of each line):
var html = '\
<div class="footer-fix">\
<p>This is its contents......</p>\
</div>\
';
var css = '\
.footer-fix {\
background:pink;\
position: fixed;\
bottom: 0;\
z-index: 999;\
width: 100%;\
}\
';
be sure call this function when document ready!
You can do it very easy with PHP just create footer.php file and insert code above in.
Then just call include("/path/to/footer.php"); in bottom of every page and that its.
You can use html tag
Ex:
<body>
<header class="col-lg-12" style="background-color:#444444; ">
//Here i have Header
</header>
<div class="container-fluid" style="padding:10px; height:600px;">
// Here goes my Body
</div>
<footer class="col-lg-12 text-center" style="background-color:#444444; height:50px;">
//Here Goes my Footer
</footer>
I'm a little new to HTML, CSS et al. I'm having trouble with the click event on a html page.
HTML
<div class="Box1 DaddyBox"></div>
<div class="Box2 DaddyBox"></div>
<div class="Box3 DaddyBox"></div>
CSS
.DaddyBox{
border:thick;
border-color:#FFF;
}
.DaddyBox:hover{
background: green;
}
.Box1 {
position: absolute;
left: 16px;
top: 96px;
width: 320px;
height: 96px;
z-index: 1;
background-color: #F5E255;
}
JS
$('.Box1').click(function(){
alert(Alert)
});
Is there something glaringly obvious that I'm missing? I am not getting the alert on click of the Box.
If clarity is required, I'm trying to create a grid like interface for a website. Each box will link to a new page. Again, I'm new to this and am only attempting what I have learned so far, so perhaps I am way off, feel free to point me in a new direction.
Thanks
you missed quotes for the message in alert(), change to:
....
alert("Alert");
...
and include jQyery library, and wrap your code in $(document).ready(function(){ ... }); if not already done, as:
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes to your message Alert
});
});
include java library in header
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes
});
});
Just an amateur/hobbyist here - what this is supposed to do is be a tool for a board game I play with friends. The plastic sliders the game uses are too loose to be reliable so I wanted to reproduce that functionality as a webpage to use on a smartphone while playing.
It gets a character's name from a form (on another page) and supplies it to
the one below. Based on the name, it chooses the right set of attributes from the switch statement (I removed all but two cases for the sake of simplicity), runs through a for loop to display the attributes in a list and highlight the "current" value as green. Two buttons are supposed to increase or decrease the array counter ("speed"), and rerun the function that draws the array with the new highlighted value. innerHTML is meant to redraw the div ("speeddiv") with the new results.
Now the javascript console in chrome is telling me that speedcounter() and character are undefined. I suspect this has something to do with the scope of the function and variables I'm using being lost through innerhtml. All I want to do is find a way to easily redraw/replace the stat counter so it appears that the highlighted number is moving up and down as you press the + or - buttons, within the div.
I'm only working on the "speed" attribute below, so I can get that working first.
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; }
#dossier {height: 10%; text-align: center; background: #808080}
#container {height: 90%; width: 100%; background: #000000; overflow: hidden; float: left}
#stats {height: 100%; width: 100%; float: left; position: relative}
#speeddiv, #mightdiv, #sanitydiv, #knowledgediv {width: 25%; height: 100%; text-align: center; float: left; position: relative; overflow: hidden}
#speeddiv {background: #0000FF}
#mightdiv {background: #FF0000}
#sanitydiv {background: #FFFF00}
#knowledgediv {background: #00FF00}
</style>
<?php $character = $_GET["character"]; ?>
<script type="text/javascript">
var character = "<?php echo $character ?>";
var sp;
var speed;
function speedcounter() {
var spx;
document.write(' <h2>Speed</h2></br>');
document.write('<input type="button" onclick="addspeed();" value="+"><br />');
for (spx=8; spx>=0; spx--) {
if (spx == speed) {
document.write('<font color=#00FF00>');
}
document.write(sp[spx]);
document.write('<font color=#000000><br />');
}
document.write ('<input type="button" onclick="remspeed();" value="-">');
}
function addspeed() {
if (speed < 8) {
speed++;
document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
}
}
function remspeed() {
if (speed > 0) {
speed--;
document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
}
}
switch (character) {
case "brandon":
sp=["0","3","4","4","4","5","6","7","8"];
mt=["0","2","3","3","4","5","6","6","7"];
sn=["0","3","3","3","4","5","6","7","8"];
kn=["0","1","3","3","5","5","6","6","7"];
speed=3;
might=4;
sanity=4;
knowledge=3;
break;
case "flash":
sp=["0","4","4","4","5","6","7","7","8"];
mt=["0","2","3","3","4","5","6","6","7"];
sn=["0","1","2","3","4","5","5","5","7"];
kn=["0","2","3","3","4","5","5","5","7"];
speed=5;
might=3;
sanity=3;
knowledge=3;
break;
}
</script>
<div id="dossier">
<script type="text/javascript">
document.write(character);
</script>
</div>
<div id="container">
<div id="stats">
<div id="speeddiv">
<script type="text/javascript">
speedcounter();
</script>
</div>
<div id="mightdiv">
<h2>Might</h2></br></br>
</div>
<div id="sanitydiv">
<h2>Sanity</h2></br></br>
</div>
<div id="knowledgediv">
<h2>Knowledge</h2></br></br>
</div>
</div>
</div>
</script>
</body>
</html>
I've created a jsfiddle from the code you've posted http://jsfiddle.net/amelvin/bwwce/ - working on it interactively in there may help.
I think your problem is what is happening with the document.write; the section on document.write explains that what document.write does is not very predictable.
Use a javascript library like jquery to insert elements into the webpage rather than document.write - the html() method in jquery (amongst others) allows you dynamically and predictably manipulate any aspect of the page based on events like button pushes, adding or removing buttons or divs.
Can anyone please let me how to Enlarge textarea while using OnClick function or how to increase the rows on onClick?
regards
balkar
If you can set pixel or column sizes (instead of using the rows and cols attributes), you can use the :focus CSS pseudo-class:
HTML:
<textarea id="myarea"></textarea>
CSS:
textarea#myarea { width: 100px; height: 20px; }
textarea#myarea:focus { width: 500px; height: 200px; }
depending on the layout, it's sometimes attractive to give the focused textarea position: absolute so it floats above the other elements in its enlarged state.
If you wanna use onClick, add an onClick Handler via JavaScript:
<html>
<body onLoad="load();">
<textarea id="t1">foo</textarea>
<script>
function load(){
document.getElementById("t1").addEventListener("click",function(){
this.setAttribute("rows","50");
},false);
}
</script>
</body>
</html>