I tried to put together a CODEPEN HERE for you, but I'm afraid it will not be much help since I can't reproduce the problem there.
This is a very complex and large website. It is very difficult to provide you with just the code that applies to this, since there is so many scripts and stylesheets that are working together to make it work, but I am doing my best to provide you with what I can.
Basically, when the page loads, it loads fine, but when I click on a link in the menu to take me to that page, that page loads with a "broken" menu look. SEE PIC. As soon as I refresh the page or even resize it by one pixel, it resets to the way it should look. SEE PIC ALSO
Please, someone, have you come across something like this? enter code here And if you can't find a mistake by looking at the code, is there a way to refresh any given stylesheet or script? I can't force a page refresh because some things are supposed to process from the database on PageLoad.
I'm not holding my breath, but I certainly hope you guys can help.
Here is the pic with the problem. and the link to codepen is above
Try to add something like ?v=1232 to your style
href="css/init.css?v=1232"
The problem has been resolved. Apparently, the accessibilitymegamenu.js adds the attribute aria-haspopup="true" programmatically which it makes it bug out if you add it manually when coding for JAWS and/or any other non-sighted users accessibility website.
If you're using any accessibility script and your hyperlink is coded as follows:
<a id="myID" href="#" class="myClass" aria-haspopup="true">My Link</a>
change it to:
<a id="myID" href="#" class="myClass">My Link</a>
Your output (according to the accessibility script) will still be:
<a id="MyID" aria-label="My Label" href="javascript:void(0)" aria-haspopup="true" aria-controls="accessible-megamenu-1426257105716-6" aria-expanded="true" class="MyClass">My Link</a>
Hopefully this helps others and saves them the two weeks of debugging it cost us.
Happy Coding!
Related
I'm now designing my own index page, but I've met a problem.
Due to the custom in our country, I want to make my site grey at a large event, and I'm going to check the class of other sites' item to achieve this goal.
However, I'm not good at python crawler and can someone help me?
<body class="open-homepage-tts s-manhattan-index big-event-gray" style="">
<div>
<a
id="aging-total-page"
role="pagedescription"
aria-label="欢迎进入 百度一下，你就知道，盲人用户进入读屏幕模式请按快捷键Ctrl加Alt加R；阅读详细操作说明请按快捷键Ctrl加Alt加问号键。"
tabindex="0"
href="javascript:void(0)"
></a>
</div>
</body>
The code of the site is like this.
Moreover, I suppose the crawler will save the result in a *.txt, but I don't know how to let my *.js change the color when the result changes.
(If the problem can be solved using Javascript, it's also acceptable and better.)
Sincerely thanks
I searched for these questions in Google, but I found nothing I can really use.
(Frankly speaking, crawlers are not easy things to me.)
I would like to add a new button with a link to a custom url on the addThis slideBar generated by using addThis Smart Layer Api (you can have a look at the documentation here)
I would like to add a custom service that is just a link to a precise page.
Is it possible?
Here is the sample of the code I use to generate the side bar.
addthis.layers({
'theme': 'transparent',
'share': {
'position': 'left',
'services': 'facebook,twitter,google_plusone_share,pinterest_share,print,more'
}
});
Is it Possible?
Although it's not particularly helpful to hear, I don't think that this can be accomplished with the AddThis SmartLayers API at this time. You may have found differently though, in which case I'm curious to hear about how you figured out to do it.
After perusing the docs and playing with it for a solid amount of time I can't figure out a way to insert a new option into the services on any of the layers (Share, Follow, What's Next, or Recommendation layers). The only way that I think adding a service to any of their SmartLayers would work is to submit it to AddThis to get it officially approved.
On the bottom of this page you can submit new services to AddThis to be implemented into their API completely. The massive downside to this in terms of your problem is that the submitted service needs to be OExchange compatible. For some projects this may not be feasible, but it might not be too much of a roadblock if you're free to implement compatibility in whatever web application you want to add to their services.
Small discussion about the API.
AddThis' platform is based around being able to show the most relevant marketing to its users, and so making custom buttons/services is discouraged by AddThis. They try to encourage developers to use their built in personalization by saying things such as:
We encourage you, however, to take advantage of automatic menu and
toolbox personalization. You'll see an increase in overall sharing of
about 20%, particularly from your site's international visitors, who
use many of our other hundreds of sharing services!
I think that this is why AddThis is not the most easily customizable service on the planet. However it is very good at what it boasts, showing relevant marketing to users.
The Workaround
These may be aspects of the API that you're familiar with and know how to use but I figure it can't hurt to help by providing them since the answer to the originally proposed question was "Probably not".
You can make what AddThis refers to as a toolbox of buttons and then put your service anywhere in the mix. This is done using HTML instead of JavaScript and it looks like this for the "default" toolbox:
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This produces clickable sharing service links for the top 4 most
preferred services as decided by AddThis.
Now let's make one of these buttons our own. We will just use stackoverflow.com as an example.
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_stackoverflow" href="http://www.stackoverflow.com">
<img src ="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" width="16" height="16" border="0">
</img>
</a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This code produces a clickable stack overflow button alongside the top
buttons as suggested by AddThis!
Although this isn't what you're looking for exactly, I hope that it helps!
The addthis creates a division with id #at4-share and creates the links within it, try to prepend ( or append ) using jquery an "a" element similar to the elements created by the addthis plugin in this div, and create a custom class similar to aticon-print in your css and set your custom icon.
I haven't tried it though but i think it shall work.
$("#at4-share").prepend('<a class="at4-share-btn at-svc-print"
href="https://stackoverflow.com/questions/31108214/how-to-increase-audio-play-speed-using-javascript">
<span class=" at4-icon aticon-print" title="KAD">KAD</span></a>');
I currently use this code on my "thank you for commenting page" on my blog:
<a style="cursor: pointer;" onclick="location.href = document.referrer;" onmouseover="this.style.cursor='pointer'"> Click here</a>
When someone clicks on the anchor "click here", they are taken back to the page that they were on last. Since this "thank you for commenting page" is only accessible after they have landed on one of my posts and added a comment, there will always be a document referrer (wont ever be blank).
Since this was working nicely, I thought that I could add something like "We really appreciate your comment. If you want to help this blog, please consider sharing the article you have just read on Twitter" (I can include others later).
I want to anchor "Twitter" with the static share URL (http://twitter.com/?status=) with the document.referrer variable. I tried something like this without success:
http://twitter.com/?status=' + 'document.referrer;'">test
Another unsuccessful attempt:
<script>
document.write('test');
</script>
Basically I want the end result to look like this:
http://twitter.com/?status=http://www.myexampleblog.com/category/lastvisitedpost/
I have been fighting with this for a couple hours now but due to my limited coding knowledge, I am struggling. Please can someone help me? I know this could also probably be done with a function or perhaps done a better (or cleaner) way using php but I really just want to use an with javascript if possible.
Thanks in advance :)
Jared
Try This:
document.write('test');
You'll need to test this at least localhost, not as regular files like say on your desktop. I've added an alert to help you out...
1.html
2.html
2.html
Click here
I am using jquery tabify, http://unwrongest.com/projects/tabify/, to create a tab like feature for my menu.
Demo: http://jsfiddle.net/janjarfalk/6Y6Pa/1/
I am creating a menu like this:
<ul id="menu">
<li class="active">Home</li>
<li>Guestbook</li>
<li>Links</li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>
The tabs will be added automatically as anchor link to my url, reading whatever that i have on my url. I need to have a url (for links tab only) such as {domain name}/{controller}/{method}/{articleId}#contentLinks-tab, examples:
http://www.test.com/site/shipping/5/#contentLinks-tab
http://www.test.com/site/delivery/3/#contentLinks-tab
while the rest will only be http://www.test.com/site#home-tab, etc. As you could see from the demo, the "{id}-tab" is auto generated based on the id. However, the problem arises if i am already on http://www.test.com/links/shipping/5/#contentLinks-tab of the links page, and if I were to go to other tabs like guestbook or home, the /shipping/5/#contentHome-tab will follow.
Can please advise how can I remove the /shipping/5/ even when I am on links tab, and hovering the rest of the tab? Sorry I was not able to provide much coding as I have no idea about doing it. Hence, really appreciate someone can shine some lights. Many thanks.
This is a tough one to answer, as jsFiddle is obviously missing the /shipping/5 part of the URL; And if understand correctly we're basically trying to change the functionality of the plugin.
At any rate, it's a little hacky, but you could try changing the href attribute of the Home and Guestbook links using javascript. So first give the Home and Guestbook links IDs:
Home
Guestbook
Then use jQuery to replace the URLs after Tabify has initialized:
$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');
Which would equate to http://www.test.com/site#contentHome-tab, etc., effectively getting rid of the undesired part of the URL.
Or if that doesn't work (hard to tell when using such a plugin on jsFiddle), you could get even more hacky and instead add onclick listeners to the Home and Guestbook tabs:
$('#home').click(function() {
window.location.href = "/site#contentHome-tab";
});
I normally would never do something like this, but when you're working with plugins sometimes you gotta get a little hacky to achieve the desired effect =P
Hope this helps.
I want something that the webmaster can copy into his site.
It just needs to have my logo, a text box, and a submit button. (When the user clicks submit using that widget, it forwards to my site.)
I know there are many ways to do this. What is the fastest and easiest?
I don't know about fastest and easiest, but maybe you could write a little JavaScript file that creates and injects the content into a div with a special ID.
This is along the lines of what StackOverflow does for their "flair."
Fastest way is to just put some HTML code that people can paste in their page. There's no need for buttons or form, just a simple link.
Something on the lines of:
<a href="http://www.yoursite.com/">
<img src="http://www.yoursite.com/yourlogo.jpg" alt="yoursite.com logo" title="Visit yoursite.com!" />
</a>
You'll probably want to add a couple of style tags (e.g to avoid borders around the image etc)
Also, it would be easy on your site to have a little JS that changes the code above so that people can personalize it (point to different images, different sizes etc etc)
Some may frown upon it but possibly the fastest and easiest way is to use an iframe. It means that the embed code can be quite short + you can change the behaviour at a later date.
Iframe's main advantage is that you don't have to deal with the css that's already included in the page. Might not seem like a big deal but sooner or later you'll run into a page that does something with a css attribute that you just hadn't expected.
It's not pretty but it's worth considering.