This is what I have at http://www.hairattheritz.com/untitled.html
I love the way it resizes for various screen sizes, however I cannot find a way to make it link to the home page. Even the no script link I tried didn't work...
<figure id="logo">
<div data-picture data-alt="Hair at the Ritz logo">
<div data-src="images/hatr_logo_s.png"> </div>
<div data-src="images/hatr_logo_m.png" data-media="(min-width: 45em)"> </div>
<div data-src="images/hatr_logo.png" data-media="(min-width: 60em)"></div>
<noscript>
<img src="images/hatr_logo.png" alt="Hair at the Ritz Logo" name="logo" id="logo">
</noscript>
</div>
</figure>
I'm hoping this is a simple fix...somewhere
Thanks in advance
Actually the link to index.html is working for me.
Maybe you just can't see the image to click on because of several problems with your markup and JS.
You should check w3c validator for more info.
You are using the $ Sign in your JS. I assume you want to use jQuery?
Then you have to include it first. For example put the following in your html file:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Related
I am trying to add the <div> based code to my company sharepoint website, but its getting an error saying they accepted only <iframe> based embed code. I converted <div> to <iframe>, its still not working. Seems there is a problem in my convertion. I am using margin calculator from omnicalculator website.
The actual code from website:
<div class="omni-calculator" data-calculator="finance/margin" data-width="300" data-config='{}' data-currency="CAD" data-show-row-controls="false" data-version="3" data-t="1653660714244">
<div class="omni-calculator-header"></div>
<div class="omni-calculator-footer">
<img alt="Omni" class="omni-calculator-logo" src="https://cdn.omnicalculator.com/embed/omni-calculator-logo-long.svg" />
</div>
</div>
<script async src="https://cdn.omnicalculator.com/sdk.js"></script>
I am using the below code.
<div class="omni-calculator" data-calculator="finance/margin" data-width="300" data-config='{}' data-currency="CAD" data-show-row-controls="false" data-version="3" data-t="1653660714244">
<div class="omni-calculator-header"></div>
<div class="omni-calculator-footer">
<iframe src="https://www.omnicalculator.com/finance/margin" target="_blank"><img alt="Omni" class="omni-calculator-logo" src="https://cdn.omnicalculator.com/embed/omni-calculator-logo-long.svg" /></frame>
</div>
</div>
<script async src="https://cdn.omnicalculator.com/sdk.js"></script>
I contacted the support from omnicalculator but no response from them. Please check my code.
I am trying to link an image to a website i'm building but i am having trouble linking the img. It's on my desktop and i believe i've taken the right steps, but i keep getting a "broken image symbol". Please take a look at the code and let me know if anything is wrong.
<nav class="navbar navbar-default navbar-fixed-top" id="my-navbar">
<div class="container">
</div>
<div class="container">
<div class="navbar-header">
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')">
</div>
<div class="row">
<!-- insert rows here -->
</div>
</div>
</div> <!-- End of Container -->
</nav> <!-- End Nav Bar here -->
Ok first moan - indent your code (unless its just from copying and pasting into SO and it messed the format, in which case - sorry for the moan xD)
I have a feeling, the image isn't showing because it's 404'ing - if you open up the browser console / firebug it should show you if it's 404'ing
secondly, you're using images src correctly but is the file structure? Should be something like:
html
index.php
somepage.php
img
img1.jpg
img2.jpg
this means that if you called img in index.php like:
<img src="img/img1.jpg" class="some-class" id="some-id" />
it should show - let me know if it works :)
(notes)
don't have to be a .php file - tis just what I'm used to
You are not closing your tag properly! Do this:
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')"/>
Also, make sure that your path is correct, you are using a relative path for your project. Can you post your project structure?
I am using Ckeditor in Drupal.
I have tried to add the following code in the block content using ckeditor
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" alt="">
<div class="intro-text">
<span class="name">Start Bootstrap</span>
<hr class="star-light">
<span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</div>
</div>
</div>
</header>
But the above code displaying like this
<header></header>
Inside contents are not displaying. I don't know what is happening inside. Did anyone know about this?
This has to do with the cleanup and output settings of both Drupal and CKEditor. The fastest and most effective way to achieve this is by creating a new input format, for example "HTML" via /admin/config/content/formats/add with all cleanup processing disabled. This way, your HTML input = HTML output.
Sidenote: Make sure your profile/the admin profile/role is the only role that is able to use it so only trusted users have access to this text-format.
I'm using Visual Studio 2012 for an MVC web app using code first method with EF 5.0.
I have written the following code to make a modal window appear at some point:
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"><img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/></div>
<div id="mod-content"></div>
</div>
</div>
If works fine, exept that the image <img src="~/Content/icons/close.png" [...] /> cannot be found by the browser which thinks its URL is
http://localhost:49895/Class1/Home/~/Content/icons/close.png
To be precise, every code under my div's got broken URL. If I put my image above the div's it's displaying correctly with the following URL:
http://localhost:49895/Content/icons/edit.png
Do you have an idea where i messed things up?
Edit2: example (after problem being resolved)
This works:
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
This doesn't work:
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
Could be a bug in the new Razor 2.0 tilde parsing, or you've mucked up your html by missing a quotation mark or something. Try using the more explicit way of resolving urls
<img src="#Url.Content("~/Content/icons/close.png")" />
If that works then it suggests a razor bug, if it doesn't then your html is probably broken somehow but the extra # symbol may be enough for the parser to kick in and tell you what is wrong.
~ is an asp code element, not HTML. As such it doesn't get rendered by the HTML.
Try wrapping your src with #Url.Content
<img src="#Url.Content("~/Content/icons/close.png")" />
I'm trying to make my tumblr posts link directly to the source when clicked rather than going to the post page and having the source link there to click.
Here's the code I have for the photo posts.
{block:Photo}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="photo">
<div class="photobox"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
I've tried changing the photobox 'permalink' to source etc with no avail.
Anyone got any ideas?
In the hope that someone who needs this will find it, here's a way I found to show {LinkURL} when it's available, and some other url when it's not.
Tumblr offers {block:LinkURL} to display some code when {LinkURL} is available, but there's no {block:NoLinkURL} to use when {LinkURL} is NOT available.
Ideally, this should be possible:
<a
{block:LinkURL}href="{LinkURL}"{/block:LinkURL}
{block:NoLinkURL}href="{Permalink}"{/block:NoLinkURL}> <!-- does NOT work -->
<img src="{PhotoURL-400}"/>
</a>
But {block:NoLinkURL} doesn't exist, so I'm using {block:LinkURL} to hijack the normal link instead:
<a {block:LinkURL} href="{LinkURL}" data-ignored-{/block:LinkURL}href="{Permalink}">
<img src="{PhotoURL-400}"/>
</a>
If {LinkURL} is available both links will be in the HTML, but only one is read.
Example output
This is the output when {LinkURL} is not available:
<a href="/permalink">
<img src="/image.jpg"/>
</a>
And this when is the output when {LinkURL} is available:
<a href="/linkurl" data-ignored-href="/permalink">
<img src="/image.jpg"/>
</a>
after comments edit
It should be <a href="{LinkURL}">
You have to make sure when you're adding the image that you've specified the target as outside of tumblr too.