I can't get Swap to work with xlinks.
I tried to create page transitions with Swup. Things work ok with normal <a href="/secondpage.html"> tags, but inside svg I need to use <a xlink:href="/secondpage.html">.
From Swup documentation I found that xlinks should work as a selectors.
'LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
Any ideas on how to get Swup to work with SVG xlinks?
Did you figure this out already? For xlink in svg files use:
svg a[*|href]
So:
linkSelector: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), asvg a[*|href]'
Credit goes to daun on the Swup github.
Related
I want to create links to jump across an SVG. So I placed some ID's on the objects in the SVG I want to jump to and added some A tag elements linking to those ID's. This works when the SVG is inline, but when I use the Object tag to load the SVG it doesn't work. This makes sense because the object tag loads the SVG as a separate document in the main document.
Some code describing the scenario:
[some-html]
<object type="image/svg+xml" data="/somesvg.svg"></object>
[more-html]
Jump to #id-somewhere-in-the-svg
And some in the SVG:
<a id="id-somewhere-in-the-svg" xlink:href="...">
<g id="some-id">
<path d=...
For now, I solved the problem using Javascript, but I would like to know if there's a pure HTML solution.
I was checking a navbar markup example to use in a website, when I found the attribute "data-unsp-sanitized" placed in HTML anchor tags like this:
<a href="#" data-unsp-sanitized="clean">
I searched over Stack Overflow and Google, and surprisingly ended with no explanations of what this attribute does or why it is there.
It means your anchor tag has been assigned additional information clean. It may be used by CSS or Javascript. More about HTML data-* attributes you can read here.
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />
having trouble with a CSS problem, but I can't figure it out. none of my images are displaying, yet they have working urls and the HTML is correct.
there's no image styling, and the image class's only styling is: .postimg { width: 100%; }
problem here:
http://jsfiddle.net/4pmUu/5/
this probably has a really simple solution, but i can't figure out what's wrong..
You do not have the correct image tag. To show an image in HTML use the <img> tag.
see http://jsfiddle.net/4pmUu/7/
As far as I can tell, you just have the image tag wrong. <i> is italic text; you want <img> instead. That is, <img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" />
If you substitute <i ...></i> and use it (below) it should work.
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"/>
You are using the image tag as:
<i src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"> this is where the actual error it.
The correct way to do is to write <img... use this:
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" alt="photo" />
Also please note that, using alt="" is necessary in images, as if the image is not loaded because of some issue, the user will be shown a text about that image.
Is there a way to increase the duration of a tool tip displayed using the title attribute of an html tag?
Currently in IE it appears to only have about a 5 second duration and then disappears.
I think this is operating system dependent and you should not try to override that.
The best way will be to create a custom tooltip.
Here are some good ones
jQuery Tooltip Plugin Demo
How to increase default hover duration of title attribute (tooltip)
Dont use IE, no time limit in Firefox browser. Or use the code I done.
I made some code in html/css only in one file, could not make it easier.
<!DOCTYPE html><html><body><style>
.m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block}
.m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #000;background-color:#eee;color:#000;min-width:300px}
</style>
<div class="m"> News <span> Links inside span works good <a target="_blank" href="http://cnn.com">Cnn.com</a></span></div>
<div class="m"> Hover over here and Information comes up <span> To make complex things easy is not so easy to do. </span></div>
<br> Just som text here to give you the 3D effect <br>
</body></html>
To elaborate further on phoenix' answer. Custom tooltips will allow you great flexibility in their appearance and layout. You need to get a JavaScript library (for example, jquery, or mootools) and get a plugin to show them. Then you will link the JQuery .js file, the plugin's one, and the css, finally you will add some markup to make it work.
For example, this one: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ or this one: http://craigsworks.com/projects/simpletip/
They are usually quite simple to install, the only requirement is that your site supports javascript.
Try WZ tooltip (may no longer be maintained): Click here