Is it possible to use only CSS to fix url spaces?
Eg: A couple of my url's go like this
<p class="Small-Brown-No-Italic">Link Here: <span class="Hyperlink _idGenCharOverride-1">http://www.example.com/static/TextBox.html</span></p>
Notice the space in the href attribute towards the end. When the user clicks on this url, it gets converted to:
http://www.example.com/static/TextBox.html%20%20
Can CSS help here to fix the spacing issues towards the end of the url? I cannot use JavaScript or jQuery.
No, you can't do this using CSS, you'll need to use, e.g. Javascript*:
var links=document.getElementsByTagName('a');
for(var i=0;links.length;i++){
links[i].setAttribute('href',links[i].getAttribute('href').trim());
}
Remember the seperation of concerns, and responsibility- i.e HTML is for content, CSS for styling and JS for functionality.
* indictative only
You must correct your URLs before sending them.
If you have a lot of URL with this problem, just loop over them and apply trim() (PHP) per exemple.
Related
I have tried to add styling to tag and tag around the phone number and that does not work. I also tried adding a script before and after calling the class as .span.gc-cs-link {color:#color;} but that also does not work. I am running chrome with a google voice extension - could that be what is causing it? Either way it would be nice to know how injected stylesheets work and how to override their styling.
enter image description here
You can use this HTML encoded dash in place of the - character to avoid the issue:
‑
555‑555‑5555 would be
555‑555‑5555
I want to know how to remove this line:
class="local-link">
which is appear just before our all internal links.
I have found this code on our website Source Page.
class="local-link">
if you want just to remove the attribute class from an element like div use jquery, for example if you have this <div class="local-link"></div>
and with jquery do $('.local-link').removeAttr('class');
EDIT:
If you want to remove local-link and let the attribute class empty you should do this: $('.local-link').removeClass('local-link');
Download all the files by ftp. Search them for the string 'local-link'.
Please give reason why not leave it there.
Is there a way to change the CSS style, according to what page the users clicks? And not load different CSS files every time, to do this?
I have a web mapping site, so in small devices I want to do display : none for the header, so the map's div will appear bigger. I will use media queries for this, but the header also changes in all the other pages. I want it to change only in the map's page.
How can I do this? It would be great if there is a method that you dont have to load different CSS files. Is it?
Thanks in advance.
EDIT
The structure of my files is like
<?php
error_reporting(E_ALL);
include_once('header.php');
//rest of the code of the file starts here....
where header.php contains header, menu bar, metadata.
So I cannot just give an id to the header, cause it will still be the same id visible from all the pages
Thanks again
If your page is static one and you need to make only one change, just create a class with display:none; and apply the same to the header without affecting any other page or page elements.
This way, your header also gets hidden and your purpose also gets resolved.
Other way would be to add an id to your <body> and by using parent child CSS selector, hiding your header subsequently for those pages.
Hope this helps.
ou can check your URL through JavaScript and add style for specific element
example
if (window.location.href.toString().toLowerCase().indexOf("map") != -1) { // If url contains maps
document.getElementById("p2").style.display="none";
}
The title says it all, how would I make it using only html, no JAVASCRIPT, to stop the page from jumping back to the top if a user clicks on an empty tag? So for example, if at the very bottom of my site, I have a link that is empty, but click on it, it takes be clear back up to the top...
A simple solution to this would simply put in the a tag:
Title
In doing this, it won't scroll your page back to the top. To have it scroll back to the top, take out the a after the # symbol...so it would look like this:
Title
That is the best explanation I can give you without any code provided from you.
Give that a try and it should work with what you are asking for...No javascript is needed. In fact you can even make the #a jump to a different location if you'd like on your page :)
UPDATE:
This may suit you better! Add this to either a js file or add it inline with you html document.
Separate js file (just make sure to call it externally on your html file):
$('#Add_Your_Id_Or_Class_Here').removeAttr('href');
Example: $('#link a').removeAttr('href'); or $('.link a').removeAttr('href'); or even $('a').removeAttr('href');
Now, if you want to achieve this via inline on your html file, simply do this:
<script>
$('#Add_Your_Id_Or_Class_Here').removeAttr('href');
</script>
Again, you can use any of the examples above as well. In fact there are many ways you can achieve this now that I think about it...Hope that helps :)
If your link isn't supposed to be linked (such as when it's just a placeholder for where a link could be) then you should not add an [href] attribute to the <a> element
I have been using CakePHP for a while and recently needed to send emails from an app. Unfortunately I can not figure out a way to tell CakePHP to include the css directly in the document as an internal style sheet instead of a link. I know people think that is a bad idea, but my app is only sending emails to our company so I'm not worried too much about someone's email client messing it up. If I just include the link it doesn't work since the reference is wrong, although if I could make the link an absolute link (http://myserver/css/myfile.css instead of /css/myfile.css) that would be a 2nd best alternative since they would have access to my server.
If there isn't a way to do it in Cake, is there a quick way to just use PHP to read the contents of the file and dump it in the view? I guess I could do that from the controller, sounds like a bad hack though.
Any ideas would be appreciated, thanks
You could use readfile() to print the file content directly in your view.
Or you could $this->Html->url('css/yourcss.css', true) to get the full path to the file and pass it too the css method.
I would like to suggest you to use php variable as style class and use it directly as css class. For example.
$class1 = "border : 1px solid #eeeeee; font-family : font1, font2, font3; color : #785634;"
And use it in your email template as
<div id='my-div' style=<?php echo $class1; ?>>Your div content </div>
Even I do not know any way to include style sheet in the email, and if you create some classes those will not work in email templates.
So this is how I'm using css in my projects.
you can put the css in email layout like normal html (use html email layout)
<style type="text/css"></style>
Reviewing the code of the htmlHelper shows that it can't be done.
However, you can change or overload the helper; to do so in the simplest way just add a new option between line 371 to 378.
I used PHP's include function enclosed in a script tag and it worked perfectly! In the default email view:
<script>
include('css/your_css_doc.css');`
</script>
You can write css inline:
<h2 style="color:#818381">Here are the latest stories everyone's talking about...</h2>