First than all sorry that I can put code here, the best way is to see the live site.
WHen I go to www.theprinterdepo.com, the menu is acting weird on the onmouseover.
However when I go to a product page it works fine.
I am trying to know whats going on in the html but I cant find the problem.
pasting the entire generated html wont do any good.
This is a magento ecommerce site. so either its a problem with html, js or css?
Once detected I could paste the original code that generates that part of the problem
I got it! There is class named "over" in line 28 on any of your css(may be in assets new.css) remove that class & everything will be fine. Below is the given class.
.over {
left: 40px;
position: absolute;
top: 10px;
z-index: -1;
}
I am attaching image regarding this class. https://dl.dropbox.com/u/19982181/svs.jpg
Related
Recently I've encountered a problem with my Prestashop store (ver 1.7.7.1). I changed the default theme with a new one and on a desktop everything seems fine.
A customer brought to my attention that while browsing the store from his phone, the items in any of the categories decrease in size as he's scrolling down the page.
Furthermore, when I click on a product and the product page opens, the first image is bigger than the display (I'm using combinations because I have a product with different colors) and also the default combination cover image is the wrong one. If I click on the second image and then back on the first one everything looks ok.
I tried modyfing the theme's css with no luck.
I'm guessing that is a javascript problem but I'm not a coder so this problem is above my head.
The site in question is gentidebarbati.ro
I would really appreciate it if you could take a look and maybe figure out where the problem is coming from.
Thank you so much!
This is not a javascript problem ..
It seems that one html element is not closed on your product listing page.
Check the 'catalog/_partials/miniatures/product.tpl' and the 'catalog/_partials/products.tpl' files.
And for solving the product page image bug, add this code to the custom.css
body#product .slick-initialized .slick-slide img {
max-width: 100%;
height: auto;
}
Link: http://up8.431.myftpupload.com/services/
I need to turn the section on the page above into clickable buttons. I'm using WordPress with the elementor plugin installed.
I've already added some extra CSS to make the sections appear to clickable. I just need to add the actual functionality. I understand this is done with javascript. I haven't tried adding any javascript code yet. I'm a little hesitant too because I don't think I have the skill and knowledge to do it properly. I don't want to just start adding code everywhere. Past experience has thought me that's a bad idea.
I'm hoping someone experience with elementor can help me out. Here's where I'm stuck:
Where do I add the javascript? There's nowhere for me to add javascript like there is a section for CSS for each element. Should I add it in the customizer (Appearance --> Customize --> Custom CSS/JS)? Should I get a plugin for custom javascript? I've already given each element a custom class. I could attach some JS to these classes.
EDIT: Thought about it a little more. I don't think adding the JS in the Customizer is the way to go. I'm thinking any CSS/JS I add there should be exclusive for the topbar, header, and footer. My reasoning is because these are the sections that will show up the exact same way on each page.
That leaves me with the option of getting a JS plugin. Is this the best way?
What would be the best way to accomplish what I need to. I definitly don't have the skill to understand the Elementor Developer Docs. It's way too advanced for me. That's why I'm asking here.
Thx in advance
if you know how-to and it's through javascript you can do it this way:
Drag and drop HTML widget-> insert your js between script tags.
I recommened using html in your footer(made with elementor) so the script will be available in entire site.
I managed to find a way to do so without any plugin or js, just CSS:
First we need to set a minimum height for our Section/Column (I set 50vh);
then we have to add an element which has link/a tag (e.g. Title Widget) and set a CSS class for that (in my example .mhdizmni_title);
now we have to write a bit of css:
.mhdizmni_title a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
I've been referencing various professional website's html code as I try to write my own (I'm new to html, css, javascript etc.) and I noticed that if I view the site's code through the inspect element feature (ctrl+shift+c) they have the main body inside divs with id's and classes like wrapper, contents and inner, which is normal but then when trying to figure out how they had the wrapper centered by viewing the code normally through ctrl+u, I noticed that there is a line of code that exists in inspect element that isn't there when I view the code elsewhere. First of all, that code is this:
<div class="bgView" style="display: block; position: fixed; top: 0px;"></div>
So, could anyone tell me the reason for this?
The website:
http://www.tekken-official.jp/tk7ac/
Check line 79 for missing code.
This div is here to show this image http://www.tekken-official.jp/tk7ac/images/common/bg_main_09.jpg in background.
To find out, just reveal the div in the devtools and check out the styles panel.
The Elements panel in Dev Tools shows the generated DOM - the source shows the source as it is in the .html file. That line was generated via Javascript, as seen in line 39 here: http://www.tekken-official.jp/tk7ac/js/common.js
I'm trying to implement something like this: http://code.google.com/p/iab-billboard-adunit/ , on my site...
The demo for it is here: http://johnpaulkelly.me/iab/js_nobranded/index.html
My main issue is that I'd like to make the ad an image and not a flash file. It's easy enough to insert a .jpg into where the ad would go (in the Javascript itself), but once I do that I lose the "Close Ad" button which is part of the Action Script functionality.
Could someone help me out, or suggest the best possible way to go about appending the "Close Ad" functionality to an HTML element versus having it be part of the action script? (And not interupt the generation of the cookie)
Is this easily possible? I'm new to Javascript in general, but I could likely figure it out once I'm pointed in the right direction--I just can't seem to wrap my head around the easiest way to go about doing this...
If it makes it easier, I don't need to retain the "Show Ad" button once the cookie has been set if it makes it any simpler...
(Again, perhaps this is not the best way to do something like this--so if someone has an alternative way of going about similar functionality...I'm completely open to trying it out)
If you simply want to add a hide AD link, add your image and a link in the function loadBanner() by changing the second line using your own image url. You will also need some css to style that close text.
Just noticed that this code will be inside the iframe. It will need to call out to the parent for the close function like this.
Javascript:
window.frames["banner"].document.write('CLOSE AD <b>X</b>');
CSS: This needs to be in the iframes code
#closeAd {
position: absolute;
right: 0;
color: white;
text-decoration: none;
padding: 2px;
line-height: 1em;
}
I'm developing an application that contains a menu with links to the several pages and I would like to know what's the best way to implement it.
One solution is to create the menu on all pages via JavaScript, but it would duplicate menus when it should have just one global to all pages.
Another solution would be to create a div outside the framework but this way would not be taking any advantage of the features of the framework.
At the present version of jQueryMobile 1.0a4.1 the only solution I found was creating a div outside the jQueryMobile page structure.
HTML:
<div id="global-header">Header</div>
<div data-role="page">
...
</div>
CSS:
#global-header {
position: absolute;
top: 0px;
left: 0px;
height: 40px;
width: 100%;
z-index:99999;
}
.ui-page {
padding-top: 40px;
}
I prepared this post specifically for this question, It deals less with fixed headers and footers (since I generally believe them to be misguided wastes of already limited real estate) and more about dealing with global navigation in general. Hope this helps.
Check the plugin I'm writing, called multiview.
It's still work in progess, but you can set a global header/footer by placing it inside the wrapper page, but outside any panels you are using.
Let me know if this would fit your need. I'm slowly progressing towards bug-fixing stage.