We Keep Coding

Image Not Appearing in JQuery Script

I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>

I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.

Load iFrame On Click

I have 20 iframes on one page and I am trying to prevent all of them loading at once. The iframes are generated by a shortcode, so it's not as easy as inputting the source URL onclick. Is there a way to do this once the iframe code has already been generated.
When #file-1 is clicked, I wanted to load the iframe in the wrapper #file-1-p
<h4 id="file-1" class="click files shadow">Seven Habits Profile</h4>
<section id="file-1-p" class="popup white big-shadow">
<div class="popup-wrapper">
<div class="ex purple shadow">
<div>
<span class="f-white">X</span>
</div>
</div>
<div class="ead-preview"><div class="ead-document" style="position:relative;padding-top:90%;"><iframe src="//docs.google.com/viewer?url=http%3A%2F%2Fyourroundtable.com%2Fwp-content%2Fuploads%2F7_Habits_Profile.pdf&embedded=true&hl=en" title="Embedded Document" style="width:100%; height:100%; border: none; position: absolute;left:0;top:0;"></iframe></div><p class="embed_download">Download [49.83 KB] </p></div>
</div>
</section>

Bootstrap make part of the image clickable

Fairly new to this. At the moment I have an image and a button in one of the containers in my front page. I'm trying to embed that button into that image. Should I
make part of that image clickable, and let that trigger a function?
or force that button to float on certain position of that picture?
Or is there another way that I should follow? and how do I implement this? Many thanks!
<div class="col-md-10 col-lg-offset-1 text-center">
<img src="../img/background.png" class="rounded" alt="">
<button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above
</div>

You can use position: absolute to make it float on the image. look at this
https://jsfiddle.net/5ueau24b/1/
#s
{
position: absolute;
margin-left: -200px;
margin-top: 130px;
}
<div class="col-md-10 col-lg-offset-1 text-center">
<img src="http://www.planwallpaper.com/static/images/images_1_05GM1zY.jpg" class="rounded" alt="">
<button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above
</div>

Try using imagemap of html. (map tag in specific)

Centering a Floating div

I am stuck. Here is what I have going on, I have an AddThis sharing widget next to a main image on a webpage. The image changes sizes and I need the AddThis to change its placement with the image dynamically. I asked this in another question and through another forum I was able to get some help. Now AddThis and the image align properly and everything seems to be going in the right direction, however the image is no longer centered. I need this image to be centered on the page but I cannot figure out how to do this because I had to float the div containing the image and AddThis. Here is the HTML:
<div class="feature-container">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img class="feature-image"
src="/Images/test.jpg" width="300px;" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300
/addthis_widget.js"></script>
</div>
</div>
</div>
Any ideas how to center this? I can use a straight CSS solution or a solution using jQuery and CSS. Please provide examples.
Here is a JSFIDDLE of the page.
Here is a page that has the most up to date code I am attempting.

try this:
var pos = $('.center').width() - $('img').width();
$('.center').css('margin-left', pos);
http://jsfiddle.net/WY9YX/4/

I am not sure the content of your 'im-center', since I add an inline style（text-align:center;） as below, tested it and works fine on ie 8.
<div class="img-center" style="text-align:center;">
<img src="test.jpg" alt="test" />
</div>
Define a fixed width for center div would be OK, if this not requries a fixed width, #Raminson's jquery solution is better. I really want to know if we can implement this with pure css
<div id="top" class="wrap_fullwidth">
<div class="center" style="width:400px;">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img src="http://www.ubhape2.com/Images/test.jpg" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
</div>
</div>
</div>​​​

Try to apply margin: 0 auto; CSS rule to the div.

How to Position jPlayer

I can't seem to figure out how to position jPlayer.
I looked at jPlayer's documentation which says that jPlayer is set to be absolute positioned by default, but it doesn't appear to be because it seems to be part of the flow of the page, not out of the flow like an absolutely positioned element is.
Also, I tried applying the left, top, bottom, and right CSS properties to a bunch of elements that the jPlayer is made of and not a single attempt made any change.
Also, adding options into the javascript section on jPlayer don't seem to do anything either. I'm talking about the options listed here: http://www.jplayer.org/0.2.2/developer-guide/. I tried top and left and they did nothing.

Put this in the main div or first div tag. Then, once you are done with it, you can edit the position as you wish:
style="position: absolute;left: 100px;top: 40px;"

You have full control of the HTML Markup and CSS look/feel of your jPlayer instance. Example below (see Fiddle here)
With this standard GUI markup (taken from the jPlayer demos)
<div id="player"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
<div class="jp-title">
<ul>
<li></li>
</ul>
</div>
<div class="jp-no-solution" style="display: none; ">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
you can instantiate a player with this javascript
$(function() {
$("#player").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
ready: function() {
$(this).jPlayer("setMedia", {
mp3:"http://static1.grsites.com/archive/sounds/animals/animals001.mp3"
});
}
});
});
this renders plain, unstyled HTML in your browser. You can style your jPlayer GUI as you please. For example, by adding some positioning rules
.jp-play, .jp-pause {
position:absolute;
left: 7em;
top: 3em
}