Im trying to make a site compatible with IE8. It all looks good save one image not scaling. Any suggestions for a possible fix? Heres the appropriate code. The large picture is the one giving me issues
<div class = 'picture-container' id = 'pc1'>
<div class = 'large-picture' id = 'lp1'>
<figure style = 'float:left;max-width:45%;height:auto'>
<img src = 'make-up_artist_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
<figcaption class = 'red-cap'>Our Set-Up</figcaption>
</figure>
<div class = 'picture-content'>
<div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
<div class = 'picture-text'>We built a boutique full service production studio that allows for
one, two and three person filmed interviews and conversations.
We have studio lights, a three camera set-up and remote
monitoring. Additionally, our Infinity Wall creates a clean and
professional look that allows the film to be about the message.</div>
<div class = 'small-picture'>
<img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
</div>
<div class = 'small-picture'>
<img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
</div>
</div>
</div>
</div>
Related
I want to embed images saved in local directory into an outlook email. Have defined a function to do that and also added the html according. However, the image doesn't come up. Not an issue with the file path as I've already checked that it's working. What did I do wrong?
def Emailer(text, subject, recipient, cc):
import win32com.client as win32
import os
outlook = win32.Dispatch('outlook.application')
mail = outlook.CreateItem(0)
mail.To = recipient
mail.CC = cc
mail.Subject = subject
mail.HtmlBody = text
mail.Display(True)
MailSubject = "Daily Report for " + date_slash
MailInput ="""
<div>
<img src={}></img>
</div>
<div>
<p>
</div>
<div>
<img src={}></img>
</div>
<div>
<p>
</div>
<div>
<img src={}></img>
</div>
<div>
<p>
</div>
<div>
<img src={}></img>
</div>
<div>
<p>
</div>
<div>
<img src={}></img>
</div>
"""
MailInput = MailInput.format(date_slash, sum_path, ovdv_path, cot_path, rub_path ,pnl_path)
MailRecipient ="xxx#yyy.com;"
MailCc = "xxx#yyy.com;"
A remote recipient cannot obviously see files from your machine.
You need to add images as attachments (Attachment = MailItem.Attachments.Add) and set the PR_ATTACH_CONTENT_ID MAPI property to the value used in the <img> tag (e.g., <img src='cid:MyTestId'>) using Attachment.PropertyAccessor.SetProperty:
Attachment.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001E", "MyTestId")
Ok, I'll try to explain as best I can.
Here is my code:
HTML:
<div class="mobile-wrapper">
<div id="mobile" class="mobile">
<img src="assets/images/mobile-moments-away-img.png">
<img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
<img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
</div>
</div>
JS:
const handleClose = (elem) => {
console.log(elem);
elem.style.display = "none";
};
So, currently the handclose function currently hides the element, in this case it closes the image that has onclick="handleClose(this). What I need, is that when I click that image, it closes the mobile class instead of closing that image. So I am unsure how to reference the mobile class whilst still using this.
I have to use this as I have been asked too. Because I have the same HTML as above but for different images, as the JavaScript functions will doing the same thing for the above HTML as well as the different images I have. For example: My handleclose function will be using different elements but doing the same thing, hence why I am using this. So I would appreciate some help with this, and not to be told to do it a different way ie getelementbyid as that's not what I need.
Also, how would I be able to use elem.parentElement in this function, where popUp should be elem.parentElement
document.addEventListener("visibilitychange", () => {
if (!cookieExists()) {
popUp.style.visibility = "visible";
// popUp.style.top = "10vh";
document.cookie = `${cookieName}=true;max-age=604800;SameSite=None; Secure`;
}
});
You can refer to the parent element using .parentElement:
const handleClose = (elem) => {
elem.parentElement.style.display = "none";
};
<div class="mobile-wrapper">
<div id="mobile" class="mobile">
<img src="assets/images/mobile-moments-away-img.png">
<img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
<img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
</div>
<div id="mobile" class="mobile">
<img src="assets/images/mobile-moments-away-img.png">
<img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
<img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
</div>
<div id="mobile" class="mobile">
<img src="assets/images/mobile-moments-away-img.png">
<img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
<img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
</div>
</div>
I'm learning the basics of Bootstrap and I'm stuck when it comes to creating margins. I want to give space between the quote and the thumbnails. I've looked up tutorials and even searched Stack overflow and haven't found a solution. It's as if all the elements are stuck together. Can someone please tell me what I need to do to create a margin? Thanks in advance.
<div>
<h1 class = 'text-center'> Bob Dylan </h1>
<img width = '80%' class = 'img-responsive center-block' src ="http://www.billboard.com/files/media/bob-dylan-portrait-bw-1966-billboard-1548.jpg" alt = 'Bob Dylan'></img>
<h3 class = "text-center">". . . he not busy being born is busy dying."</h3>
</div>
<div class = 'row'>
<div class="col-xs-2">
<img width = "100%" src = 'https://upload.wikimedia.org/wikipedia/en/thumb/6/60/Bob_Dylan_-_Bob_Dylan.gif/220px-Bob_Dylan_-_Bob_Dylan.gif'>
<p class = 'center-block'> 1962 </p>
</div>
https://codepen.io/jwdwsn/pen/awaGdv
To solve this, instead create a new class "bottom-margin" that adds the standard margin that you need.
.bottom-margin { margin-bottom:30px; }
Then add a div after the quote div as below
<div class = "row bottom-margin">
<div class = "col-md-12">
</div>
</div>
I tried it works.
Hope this helps.
Pretty straight forward.
When I zoom in on my page, the divs and such don't expand to fit the document but on the original website i'm imitating it does. How does their code differ? What code are they using to do the trick.
Mine: http://socialvender.com/danielbrown
Theirs: http://gunbi.net/
Just hold CTRL and Zoom In.
Can someone help me out?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id = "container" />
<div class = "banner" />
<h4>Gundi!</h4>
<div id = "divider-p">
<div class = "seperators"><span></span></div>
<div id = "networks">
<!-- <div id = "facebook"><img src = "images/fb.svg" width = "24"></div>
<div id = "twitter"><img src = "images/twitter.svg" width = "24"></div>
<div id = "tumblr"><img src = "images/tumblr.svg" width = "24"></div> -->
</div>
</div>
</div>
<div id = "navigation">
<ul>
<li>
<a>
Home
</a>
</li>
<li>
<a>
Ranking
</a>
</li>
<li>
<a>
Support
</a>
</li>
<li>
<a>
Media
</a>
</li>
<li>
<a>
Store
</a>
</li>
<li>
<a>
Forum
</a>
</li>
</ul>
</div>
<div id = "players-online">
<div class = "amount">
<span>0 people are playing | server online</span>
</div>
</div>
</div>
<div class = "row">
<div class = "col-8 content">
<section id = "register">
<div class = "game">
<button id = "game-start" class = "col-2">Game Start</button>
<!-- <br><button id = "download" class = "blue">Download</button>
<button id = "register" class = "blue">Register</button> -->
</div>
</section>
</div>
</div>
</body>
</html>
Full Code Here: https://jsfiddle.net/yayyjL14/
I see two problems with your site:
One, the navbar is not responsive because you haven't put it in a responsive container, as there is no fluid measurement (i.e.: percentages) for the width. I would recommend learning Bootstrap, a CSS/Javascript framework. Just the grid system alone (built on CSS) , would enable you to save a considerable amount of time building responsive containers that allow you to dynamically size your content depending on the size of the browser. You can download Bootstrap at: http://getbootstrap.com/ and learn the grid from: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Another problem I see is that there is no width assigned to the button, and thus it is prone to changing width. I would set the width to a px, just so it does not resize, and stays a certain width, as there as no point on a mobile device to have a button that is too small (generally stays the same size on both desktop and mobile, although you may alter this via media queries).
I am creating a site where the user can post their advertisement and the user can upload a photo... I am posting the four latest ads pics in the top of my site... so everytime I navigate through my site those latest 4 ads pics will be displayed but the problem is it renders too long.. makes my site slowdown...
how can I optimize it? I need advice guys..
and btw, I'm saving those images in my database as blob.. and selecting the 4 latest ads in my database.
<?php if($latest_upload_count > 0){ ?>
<div class = "collapse navbar-collapse">
<div class = "container">
<div class = "row">
<?php while($get_lastest_pics = mysql_fetch_assoc($get_5_latest_ads_query_string_execute)){ ?>
<div class = "col-xs-3">
<img img src="data:image/jpeg;base64,<?php echo base64_encode($get_lastest_pics['img']); ?>" style = "height: 180px; width: 270px;" class="img-responsive img-thumbnail" alt="Cinque Terre" >
</div>
<?php } ?>
</div>
</div>
<br />
</div>
<?php } ?>
I tried omitting that and my site runs faster...
Save your images as files and only save paths to them in the database. Then generate thumbnails of smaller size to display them on the homepage (e.g. with ability to zoom-in those images by clicking on them) or just scale-down and optimize those images. You can save paths to thumbnails in the database too, or you can generate them on-fly (using some prefixes/subfixes in file names for different sizes).
Use some of well-known PHP libraries for images manipulations (like Imagick, Intervention Image or similar).
How about your code it self :
How about you write it like this :
if($latest_upload_count > 0){
echo "<div class = 'collapse navbar-collapse'><div class = 'container'><div class = 'row'>";
while($get_lastest_pics = mysql_fetch_assoc($get_5_latest_ads_query_string_execute)){
echo "<div class = 'col-xs-3'>
<img img src='data:image/jpeg;base64,".base64_encode($get_lastest_pics['img'])."' style = 'height: 180px; width: 270px;' class='img-responsive img-thumbnail' alt='Cinque Terre' >
</div>";
}
echo "</div></div><br /></div>";
}