How to <href..> my svg-logo with Raphael? - svg

I'm using a Raphael.js on my site. Take a look logo in the header, please. http://hooche.ru/md2
Code for logo:
<script type="text/javascript">
window.onload = function() {
var r = Raphael(logo); r.attr({href: "http://google.com/", target: "blank"});
other vector..
...
</script>
and html-code for logo^
<div id="logo"></div>
But now, we have: 1 letter = 1 Google link = very much Google links and empty, not clickable spaces around letters in one svg-logo.
How to do: 1 svg-logo = 1 link to somewhere with no empty spaces,
for example, div logo have:
width: 190px;
height: 67px;

Replace your div with a link, then you won't need the r.attr() bit either.
<a id="logo" href="http://google.com/"></a>
(I would not advise using target="_blank" there. It's not the standard behaviour. Let the end user choose.)

I think I understand why. I had to do something like this:
<a id="logo" xlink:href="o-nas.php" title=""></a>
xlink
I read in the documentation.

Related

Trying to use PugJS to iterate both href attribute and link text

I'm having a hard time taking my json object and using the name and values to make a link. I've tried separate arrays as well, but I've decided it'd be easier if I set the object as {title:url} and when I use this code:
ul
each url, title in news
li= title
li= url
it returns my titles and urls like so
These are the arguments against net neutrality — and why they’re
wrong
https : //techcrunch .
com/2017/05/19/these-are-the-arguments-against-net-neutrality-and-why-theyre-wrong/
The bizarre naming trends that modern startups follow
https: //techcrunch .
com/2017/05/20/the-bizarre-naming-trends-that-modern-startups-follow/
Salesforce marches steadily toward $10B run rate goal
https :// techcrunch .
com/2017/05/19/salesforce-marches-steadily-toward-10b-run-rate-goal/
Uber threatened to fire engineer at center of Waymo trade secret
lawsuit
https :
//techcrunch.com/2017/05/19/uber-waymo-anthony-levandowski-termination-threat/
but when I try to make links with this code
each url, title in news
a(href= url) title
I get this:
titletitletitletitle
the links work, but it won't iterate the title...
any tips with this issue?
I decided to switch to an array and it seems like you need a = after (href= link) like this:
each articles in news
p
a(href = articles.url)= articles.title
li= articles.description
The issue is actually that there must be an equal sign (you were right about that) but there can be no space between the assignee (left side) and that equal sign. For example, this works:
ul
each url, title in {'/a': 'Title A', '/b': 'Title B'}
li
a(href=url)= title
... and will render:
<ul>
<li>
<a href='/a'>Title A</a>
</li>
<li>
<a href='/b'>Title B</a>
</li>
</ul>
If you omit the equals sign or leave a space like this:
ul
each url, title in {'/a': 'Title A', '/b': 'Title B'}
li
a(href=url) = title
... you'll get:
<ul>
<li>
<a href='/a'>title</a>
</li>
<li>
<a href='/b'>title</a>
</li>
</ul>

Search entire text for images

I have a problem with a project.
I need to search a string for images.
I want to get the source of the image and modify the html form of the img tag.
For example the image form is:
and I want to change it to:
<div class="col-md-3">
<hr class="visible-sm visible-xs tall" />
<a class="img-thumbnail lightbox pull-left" href="upload/uploader/up_164.jpg" data-plugin-options='{"type":"image"}' title="Image title">
<img class="img-responsive" width="215" src="upload/uploader/up_164.jpg"><span class="zoom"><i class="fa fa-search"></i>
</span></a>
I have done some part of this.
I can find the image, change the form of the html but cannot loop this for all images found in the string.
My code goes like
Using the following function I get the string between two strings
// Get substring between
function GetBetween($var1="",$var2="",$pool){
$temp1 = strpos($pool,$var1)+strlen($var1);
$result = substr($pool,$temp1,strlen($pool));
$dd=strpos($result,$var2);
if($dd == 0){
$dd = strlen($result);
}
return substr($result,0,$dd);
}
And then I get the image tag from the string
$imageFile = GetBetween("img","/>",$newText);
The next was to filter the source of the image:
$imageSource = GetBetween('src="','\"',$imageFile);
And for the last part I call str_replace to do the job:
$newText = str_replace('oldform', 'newform', $newText);
The problem is in case there are more tha one images, I cannot loop this process.
Thank you in advance.
The best, simple and safe way to read an xml file is to use an xml parser.
And, I think you will gain a lot of time.

Attempting to change the colour of one link without a colour without the option

So I have been attempting different variations of trying to use #dc6820 in my code to change only one link source for a layout I'm helping someone with. Usually, I don't have too much trouble, but no matter what I've tried, it just remains the same (or I muck up the coding and have to redo it)
This is the section I'm attempting to change:
< div id="info" >
< br >posted < a href="{Permalink}">{TimeAgo}< /a> {block:RebloggedFrom}
**via < a href=" {ReblogParentURL}">{ReblogParentName}< /a>{/block:RebloggedFrom}
{block:ContentSource}(< a href="{SourceURL}">© < a href="{SourceURL}">{SourceLink}<
/a>){/block:ContentSource} {block:RebloggedFrom} < a href="{ReblogParentURL}"
target="_#nk">< /a>{/block:RebloggedFrom}**
with < a href="{Permalink}">{NoteCountWithLabel}< /a>
{block:HasTags}< div id="tags">♡{block:Tags} #< a href="{TagURL}">{Tag}< /a>
{/block:Tags}< /div>{/block:HasTags}</div></div>
{/block:Posts}
{block:PostNotes}< div id="notes">{PostNotes}</div>{/block:PostNotes}
{/block:Posts}</div></div></div>
< /div>
I'm attempting to change the section between asterisks (via --> /block:RebloggedFrom}
Edit// I've attempted the style change referenced below to, unfortunately, no results :(
Here's a link to the pastebin with the section (hopefully) without the errors pastebin.com/qNAbZAhQ –
First, let's clean-up that HTML and make sure our tags are closed.
HTML
<div id="info">
{block:Date}
posted <a class="time" href="{Permalink}">{TimeAgo}</a>
{/block:Date}
{block:RebloggedFrom}
via <a class="reblog" href="{ReblogParentURL}">{ReblogParentName}</a>
{/block:RebloggedFrom}
{block:ContentSource}
(<a class="source" href="{SourceURL}">© {SourceTitle}</a>)
{/block:ContentSource}
{block:NoteCount}
with <a class="notes" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
{block:HasTags}
<div id="tags">
♡
{block:Tags}
#<a class="tag" href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
{/block:HasTags}
</div>
As you can see, in addition to closing tags (and removing unnecessary elements) and wrapping everything in its correct block, I added different class attributes to each type of link so that you can go into the stylesheet in the head and add your colors. For example...
CSS
<style type="text/css">
a.reblog {
color: #DC6820;
}
</style>
or
<style type="text/css">
.reblog {
color: #DC6820;
}
</style>
or even
<style type="text/css">
.reblog:link {
color: #DC6820;
}
</style>
That latter would allow you to use CSS state selectors to change the color of the link depending on the state of the link, e.g. active, hover, visited.
You can add a style attribute to your a tag as such
< a href=" {ReblogParentURL}" style="color: #dc6820;">
Of course you need to add this to all your a tags that you want to change.

Jade mixin trouble

I'm using jade's mixin and got some trouble:
code:
mixin renderLink(linkName,linkUrl,linkClass,other)
- var active = req.url==linkUrl?'active':''
li(class=[active,linkClass])
a(href=linkUrl) #{linkName}
#{other}
....
.nav-collapse
ul.nav
+renderLink('HOME','/')
+renderLink('CHAT','/chat',null,'span.badge.badge-warning 2')
what I want is:
li
a(href="#")
CHAT
span.badge.badge-warning 2
how to modify #{other} to get what I want?
thanks
---thanks, use this:
mixin renderLink(linkName,linkUrl,linkClass)
- var active = req.url==linkUrl?'active':''
li(class=[active,linkClass])
a(href=linkUrl) #{linkName}
block
and got what I want:
<li class=" ">
消息<span class="badge badge-warning">2</span>
</li>
Well first of all, I'm assuming you want CHAT on the same line as a since you don't want a <chat></chat> element.
It's not documented (in the official docs), but what you want is to use a block. Try this:
mixin renderLink(linkName,linkUrl,linkClass,other)
- var active = req.url==linkUrl?'active':''
li(class=[active,linkClass])
a(href=linkUrl) #{linkName}
if block
block
....
.nav-collapse
ul.nav
+renderLink('HOME','/')
+renderLink('CHAT','/chat')
span.badge.badge-warning 2
I'm not sure if the if block statement is necessary.

HTMLPurifier allow attributes

I'm having troubles making HTMLPurifier do not filter tag attributes but without success until now and im going crazy.
$config = HTMLPurifier_Config::createDefault();
$config->set('Core.Encoding', 'UTF-8');
$config->set('Core.CollectErrors', true);
$config->set('HTML.TidyLevel', 'medium');
$config->set('HTML.Doctype', 'XHTML 1.0 Transitional');
$config->set('URI.DisableExternalResources', false);
$config->set('HTML.Allowed', 'table[border|width|style],tbody,tr,td,th,img[style|src|alt],span[style],p[style],ul,ol,li,strong,em,sup,sub');
$PHTML = new HTMLPurifier($config);
echo htmlspecialchars($PHTML->purify($html));
// The input string:
"Some <span style="text-decoration: underline;">cool text</span> <img src="http://someurl.com/images/logo.png" alt="" />.
// The output string:
"Some <span>cool text</span> <img src="%5C" alt="" />.
I want to allow the given attributes for specified elements which are defined in HTML.Allowed option.
Turn off magic quotes. (Note the %5C)
Bit of a late suggestion, but I've run into a similar issue with HTMLPurifier stripping style attributes even though they were configured in the HTML.Allowed setting.
The solution I found requires that you also configure CSS.AllowedProperties which looks a bit like this:
$config->set('CSS.AllowedProperties', 'text-align,text-decoration,width,height');
Use this in conjunction with HTML.Allowed:
$config->set('HTML.Allowed', 'img[src|alt|style],span[style]');
I hope someone else finds this useful, you can read more about CSS.AllowedProperties here.

Resources