Would anyone happen to know how to use CSS to link to an internal page instead of using a href?
The situation is... I have a feed on a page from an external source on another one of my website (which controls the link) I wish to use CSS at my end to change the direction of the link almost creating a feed without coding RSS.
As of now I am using the following code to kill the link as I would rather it go nowhere than to an undesired place:
.col-one-thirdtest a.item-link {
pointer-events: none;
cursor: default;
}
Any help would be greatly appreciated.
Problem solved by using http://open.dapper.net/user-dapps.php and http://feed.informer.com/ in order to select the sections of the page I needed and then convert them into an RSS feed! Job Done!
Nope. CSS is not a scripting/behvaioral language. It's a styling language. (Your pointer-events trick doesn't work on all browsers, anyway.)
You'll need to use JavaScript to change the link locations.
Also (as a side note), you might want to reconsider your reasons for having the feed from said external source if the links don't go where you want them to. The behavior you're asking for suggests that your feed might be the wrong way to go about your desired effect.
Related
I am using weebly site builder and so just a beginner on Html coding. I am having issues making anchors work on my pages. They seem to work on some systems and not others, and so I think there must be a better method.
Here is what I am doing
I have a guest author page and I want each guest, to have a direct link to his section of the web page
I set up an anchor as follows
Then use the following link to it
http://arthurvaso.weebly.com/guests2016.html/#smith2
On some computers/broswers this works just fine, in others, it just goes to the Top of the page instead of the section I want.
I basically have pages I want to make direct links to
Poet1
Poet2
Poet3 etc
I search here, an all the posts were either years old, or not exactly the answer I was looking for. It seems the newer the browser version, the less my method works.
I really appreciate any help, thanks!
There is a little trick to it, but it's an easy fix for you. You are missing in your Anchor.
Change:
<a id="smith2"></a>
To:
<a id="smith2"> </a>
Make sure to publish the changes.
And, note that your Anchor Link should be:
http://arthurvaso.weebly.com/guests2016.html#smith2
without the / after .html
I am using a WordPress theme and i have installed the Google translate plugin.
I'm having an issue after I translate the language. The font size is entirely to large after the change from English to any language. I have researched and found that I could use :lang pseudo tag, however when i inspect with firebug the html class of my page is still "en-US" so would the :lang pseudo tag work?
If so how do i know what to call when i switch it to french? I have been researching this for hours and have yet to find a solution. Here is a link to the website, any help would be greatly appreciated
http://rightbrainmediaanddesign.com/wordpress_jinja/
///update 1:09am ET///
I found that after translation it was wrapping my text in <font> tags so if i call that in the css it allows me to change it universally for any translation, however I still cannot target a specific language. Here is what i did. #primary-menu font {
font-size: 11px !important;
} Now that did the trick, but as i said it is universal for any translation i.e. from english to any language. Now the challange is to be able to change just french or just spanish.
(Answered in a question edit. Converted to a community wiki answer. See What is the appropriate action when the answer to a question is added to the question itself? )
The OP wrote:
Okay, ISSUE SOLVED!! I downloaded a different wordpress plugin here it is.
http://transposh.org/
Now this plugin ties into the Google Translate API, however unlike the google plugin this one actually changes the lang="" in the <html> section above the header. So, in your css, to reference a specific language in the css it would look like this(for those that dont know) html:lang(es) That would be for spanish, to reference a specific div it would look like html:lang(es) #primary-menu {}. To locate your language abbreviation, just inspect your document and you will see it located at the very top of the html in this case it says lang="es". I sure hope this helps someone out there, because it just did wonders for me.
I have made this countdown on this website:
http://www.timeanddate.com/clocks/freecountdown.html
They gave me the iframe link to put it on my website, it is perfect as can be, only thing that is high unprofessional is for it to hyperlink to their free generator, the code is iframe, i'm not an expert on that and from what I've read you can't convert it to html, but how do I go about this? This is the code for the countdown script I made:
<iframe src="http://free.timeanddate.com/countdown/i38wb1iy/n240/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2012-08-20T00:00:00" frameborder="0" width="175" height="66"></iframe>
The source of the iframe code links to this page:
http://free.timeanddate.com/countdown/i38wb1iy/n240/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2012-08-20T00:00:00
which shows the countdown, but I still can't seem to find a way to take away the hyperlink or use the code in my own way for that matter.
If anyone could help me out and tell me how to work with this iframe script or be able to create an exact same countdown, as it shouldn't be that hard(it looks pretty simple), it would be highly appreciated!
The idea of iframe is 'a webpage inside a webpage'. So if you use the iframe you actually embed the third-party code. Besides - trying to remove a link would probably violate their terms of use.
Creating your own countdown in javascript wouldn't be difficult and can be a good exercise for a novice coder. Please look at Date reference:
http://www.w3schools.com/js/js_obj_date.asp
Note, that if you substract two dates, you get miliseconds delta of these dates. Using the modulo and division operators you can convert it into years/months/days. Then use e.g. jQuery methods:
http://api.jquery.com/category/manipulation/
to perform substitution on your page.
It's very simple. Select the full iframe through dream Weaver and down you can add your index page link, so that if anyone clicks on the timer from your home page, it will not divert. You will remain in your home page.
add the following css
iframe{
pointer-events: none;
}
if this doesn't work then try adding class or id in iframe tag.
I would like to implement the application where user can include the different CSS files when clicked on different buttons. Please let me know how this can be achieved. I don't want to use the theme feature.
I am trying to change the CSS but I have noticed the ungly behaviour as follows:
When using mozilla i see the source
code for page i see code for latest
CSS.
But its not getting downloaded/ tried using the tamper data request to download CSS is not getting sent.
When I inspect the elements style is still the old file
Any idea what could be causing this? Please let me know how to get this working. Desperately looking for a solution.
Can this be done nicely using the ScriptManager control ?
To change styles on the client-side, you need to programmably change the reference to the stylesheet, which would work. However, you wouldn't see this changed in the view source... view source isn't a running document, inspecting all the changes made by JavaScript... so that can be a pain.
Firebug is pretty good, but again, even with Firefox/FireBug, IE dev tools, certain things don't get updated, depending on what you are doing.
So did you write some code and you are not seeing the changes directly, or you see the changes but you can't verify them?
HTH.
In this case I would use xmlHttpRequest with GET verb in order to obtain the needed CSS file from a dedicated handler. Pass the name of the style sheet that you need to request as a query string argument. I suggest that you fire the request dynamically, on click of the button who should download the respective CSS file.
As the title suggests i've run into a problem with anchors ASP.NET.
I've set them up the same way as you would in standard html
ex:
Introduction
and then further down the page,
<a name="Intro" ...
for some reason when i click the link, the #Intro isnt appended to the url, and i'm not taking to the anchor.
However, if i manually add the #Intro to the url it works.
Also, if i change the #Intro to a name which has no corresponding anchor with the given name attribute it IS appended to the query
What's going on?
This seems more like a browser issue or else you're not including enough code.
The code you showed us looks fine.
You have it around the wrong way. It should be NAME="INTRO" where you want the intro and HREF="#INTRO" when you want to go back to the intro.
#INTRO not #Intro .. works.
Note that there should not be any postback to the server. This is all done on client-side, implemented by the browser. Try recreating this in another browser to disqualify the possibility that its some crazy browser issue. Scan the the source code (in browser, view source) of the page to understand if anything happens when user clicks the intro link (assuming of course you have no events on the links- in that case look for the problem there).
Try dropping the quotes in the name tag and/or adding the page name to the anchor link.