jQuery Tools – Image change on hover not working [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
function() {
return typeof o!=="undefined"&&
!o.event.triggered
? o.event.handle.apply(arguments.callee.elem,arguments)
: g
}
I'm working on an asp.net site. For product categories on the website, the images for the categories are fed from a database. I've got those going fine, but the image for mouseover event is from some other part of the site. The site is using a library I've never heard of called jQuery tools with something called a sizzler css engine. If it helps, here is a link to the page I'm working on. You will notice the Duck Commander link can't change to a hover image.
The code above is what developer tools found was activating to change the image.
The Website in Question

Looks like you are missing the Duck Commander mouse over image:
GET http://fireworkssupermarket.com/Content/images/categories/duckCommander_over.png 404 (Not Found)

While I don't necessarily agree with the design of the site, I can understand coming in to a project that you can't start from scratch on.
That said, it appears to me that you are simply missing the hover image file titled "duckCommander_over.png" at path:
Content/images/categories
Find this folder in your file structure and see if the file exists, if it doesn't, you'll need to create it.

Scott,
You're simply missing the image file needed for the hover action to retrieve. The site is looking for a 'duckCommander_over.png' file which is non-existent on your site. Looks like the hover images were manually created in an image program (it's not an effect applied through CSS or JavaScript) so you'll have to upload an image with the red glow already applied and name it 'duckCommander_over.png'

Related

Website carousel stops working when second one is added [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've created a website with a simple non-controlable carousel with the following code before the /head tag
script src="jquery-1.8.2.min.js" type="text/javascript">/script
script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript">/script
I have the jquery-1.8.2.min.js and jquery.carouFredSel-6.0.4-packed.js files downloaded in my folder.
It works perfectly, but when I add a second carousel, this second one works but the first one doesn't.
I've created the second carousel downloading the files: jquery-2.1.0.min.js and application.js.
Instead the case of the first carousel, in the second one I put the following instructions inside the tag, in the div element which defines the carousel-
script src="jquery-2.1.0.min.js">/script
script src="application.js">/script
It is due to having two different js files?
Many thanks for taking the time of reading my question and sorry for my english and my lack of knowledge
I think mostly thats because of html-tag conflicts. Make sure, they have different ID's and dont overwrite each other.

HTML + CSS rendering issue [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Spent the past couple days pulling my hair out and on the road to a brain aneurysm over this.
I've created an HTML + CSS template for Ebay which looks great. Although it does not have the CSS rendered until you refresh the page after you initially open it.
To keep things simple and I'll post the exact test code im using for Ebay:
After its posted and the page is initially opened you see no CSS then the refresh makes the CSS render:
I have a professional page for a product im selling and this obviously wont fly.
This completely baffles me. Ive done everything. All browsers. Hosting the CSS on another site and pointing to it. Nothing works.
Really, anything that can in someway help would be deeply appreciated.Ill keep checking on this post every few hours.
Try using inline styles instead.
<p style="border: 1px groove black;">Thingy</p>
There is a known issue I have come across that causes problems:
When you first load an un-cached item, it loads the item's code directly within eBay. Upon refresh, it loads the item within an iframe (normal behaviour)
The first load causes issues as it carried css from the eBay main page style sheets.
try be more accurate and include a wrapper div and then style with .wrapper p {}
Also, link to an external style sheet to make your life easier updating!
Its from the wrong format/wording used in the inline style. Although they both work, it does not explain how one needs a refresh while the other does not.
You said:
it does not have the CSS rendered until you refresh the page after you initially open it.
This is maybe related to a eBay page load behavior. When you come from an external site (like pasting the eBay link to your browser) then eBay will load the page and will add their own CSS to your HTML tags. When you reload the page then eBay jumps into iframe mode and your Style elements are used.
Check topic #6 here: http://www.fix-css.com/2014/06/ebay-templates-coding-guide/
try to add border-width p{border:1px groove;}

How to include javascript with HTML in google sites? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
html and javascript work properly there as you can see.
but when I add this to a htmlbox in google sites, it shows an error saying "1+1: URI unknown:///unknown is malformed"
Help me,
thanks
Here's my html and javascript
[1]: http://jsfiddle.net/TvHdU/4/
Make sure when you hit page create that "webpage" was chosen in the dropdown.
When the box comes up to edit the page, make sure that you click the html icon in the edit box.
Copy the html you provided, and pasted it into the page and below it wrote script tags to contain the javascript you provided.
<script>
//your js code here
</script>
Since Google restricts their sites, you have to use Google APIs to obtain the js code you need in order to make the Google Gadget work. Here's the API site
This should give you what you need in order to get you Google Gadget working with JavaScript.
You can view the working google site I just created here, then click on "include html" link on left bar under "Home".

Is it good practice to create JavaScript objects on the basis of html5 data attribute values? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am working on a small HTML/JavaScript application where a user can browse through different content without refreshing the page. I use divs as 'pages' by showing and hiding the divs as the user navigates through the application. Between two pages occurs a small animation (like fading or sliding). When the animation is finished and the 'page' is visible a trigger is fired.
Each page executes his own behavior when triggered (e.g. playing a video/animation/show some text). Each page(div) has his own JavaScript class linked to it. The Class name of the JavaScript class is stored in a data attribute called data-pageClass:
<div id="page1" class="pn-page intro" data-pageClass="IntroPage">
Page 1: introduction text
</div>
<div id="page2" class="pn-page page2" data-pageClass="VideoPage">
Page 2: playing a video here
</div>
The class handling the navigation creates the classes of the pages by looping through the html structure and using the data attribute to identify which class to create. I use the 'stringToFunction' function described in this question on StackOverflow
Looping code:
$("#pages .pn-page").each(function (i, el) {
var PageClass = stringToFunction(el.getAttribute("data-pageClass"));
var newPage = new PageClass(el);
_this.pages.push(newPage)
});
For simplicity's sake I left out all the other code. please let me know when it's unclear.
So my question is if it is bad practice to 'dynamically' create objects in this way. I thought it very useful to link divs to custom javascript classes (a bit like DOM does).
I believe that what you are doing is good practice. The data attribute is meant to be used to embed custom data on a page, which is exactly what you are doing. You should obviously take care that potential attackers will not be able to inject custom HTML into your page in order to affect your JavaScript code in malicious ways, but that is nothing new.
An alternative approach I have used in the past is use view classes that run on on both the server (NodeJS) and client side. The server and client side are both able to generate the HTML, and the client side is able to attach the generated objects to the HTML if it was already generated by the server. This saves you the littering of your HTML by inserting data attributes, but otherwise it is not that much different, and it might not be applicable in all situations.

Add just a </div> using JavaScript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm going crazy! :)
I need a way to add a closing </div> before another element. But everything I try the </div> gets filtered out. The problem is, that this might be the only solution for me.
So please, please have a look to this and maybe you're able to give me a hint:
I'm building a bootstrap based template for LimeSurvey, a online survey tool. Their templates are completely done with tables and I try to find another way and to get it mobile friendly.
The template is separated into different files. For my issue this is:
-> Startpage
-> Navigator
-> Endpage
Normally it loads always a "Surveypage" between Startpage and Navigator. But there is an option which automatically puts all question directly under the startpage and therefore into my header. So in this case I need another '' or another way to close the header first.
So there's a
<div class="jumbotron">
and I have to close it before the element
<table id="ls-table" ... >
I already tried many JavaScript examples I've been able to find around the web. But none makes the job.
Thanks a lot!
Philipp
There are only two ways to manipulate a web page using JavaScript.
The DOM, or document object model.
Via string-manipulation of the HTML.
Most web browsers will NOT allow you to do #2 directly on an already-loaded or loading document. At best, you could find a situation wherein you read the HTML of a <body> and then re-parse it. But doing so is an amazing amount of work for very little effort.
Look into the insertBefore method on the DOM, which will let you grab that <table id="ls_table" > element and move it from within that <div> to being a child of said <div>'s parent, immediately after the offending element.

Categories

Resources