This is my first post to Stack, I'm having trouble debugging some CSS errors on a project I am working on. Here is a link to the page:
http://musiccomputing.com/copy-of-studioblade-5-61-key-macos-x/
You can see how the thumbnails seem to repeat, and there is some text jumbling on the right side, this is what it should look like: musiccomputing.com/studioblade-5-61-key-macos-x/ (sorry they wouldn't let me post more than 2 links).
I was working on adding a "tabbed" section under the product description. Here is the code I added which caused the aforementioned issues to occur. http://pastebin.com/JhbbmFTb. I have been trying to debug this with Pesticide and Firebug, but unfortunately I am still learning, so decided to turn to you guys who I know could solve this fairly quickly.
(by the way this is on a Bigcommerce platform)
Any help is much appreciated.
On your working version - your select boxes are wrapped in a div with a class of selector. This class on the parent is assigning the following CSS to the select box which fixes the styling issues:
div.selector select {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
border: none;
background: none;
cursor: pointer;
height: 100%;
}
Add the parent back - or add a new parent with a class of .select and the boxes will display correctly again.
Edit
On your thumbnail viewer there is a class of "ProductTinyImageList" with some styles that are being added dynamically - probably via JavaScript.
When looking in the console on your site there is also an error on line 12 of init.js - this error is probably what is preventing the rest of your JS from executing and probably what is breaking your thumbnail viewer.
The first thing I would do is fix that JS error - then retest.
Related
I made a carousel slider(copied the code from some codepen then made some changes) and it looks something like this. Anyway the problem is that those images have hyperlinks that work unless i make a transform on x axis..for lets say 240px the hyperlinks stops working. What i mean by that its that its unclickable.
This is the structure of the html code.
I made a script that adds style = "transform:translateX(-240px); to the carousel div.
Expected behaviour: the hyperlink should pe clickable.
You can find the code at: https://github.com/AlexxW/AlexxW.github.io
and the webpage at https://watchwhatmovie.tk/ (for some reason its not updated yet)
Try posting code instead of images for better answers.
this question similar to - CSS - Transform function not working on links?
you need to make the link (i.e <a> tag) CSS to display: block; because transform doesn't work on display: inline; (which is default for a tag).
Because no css was provided, maybe the z-index is not correct (the layers). Try this:
.card {
position: /* set this to relative/absolute, depending on your preference */;
z-index: 1;
}
I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.
So I found a really cool web structure I'd like to implement into one of my sites on http://www.nextendweb.com/demo/smartslider2/. There are settings gearboxes that rotate as the user scrolls down the page.
It's being done using the Transform: Matrix function. I would post a code-block of the element but I can't seem to locate the JS behind it. This is not my site, so I obviously only have access to the front-end.
HTML
<div class="cog cog2" style="transform: matrix(-0.68823, 0.72548, -0.72548, -0.68823, 0, 0);"></div>
CSS
#technicaldetails .cog {
background: url(images/bigcog.png) no-repeat 0 0;
width: 502px;
height: 476px;
position: absolute;
}
the element in question is located in a div with Id's cog1 & cog2 if you're having trouble locating it on the web page.
could anyone guide me in finding the JS behind this element from the front-end? I tried inspecting and looking through the sources...
The site uses a JavaScript plugin called "TweenMax" from http://www.greensock.com, which is part of their "GreenSock Animation Platform (GSAP)" product.
The usage is simple. For example:
TweenMax.to("#technicaldetails .cog2",1,{rotation:"-=20"});
perhaps this website would be useful: http://croberts.me/2013/02/16/howto-rotating-gears-when-user-scrolls/
theres js, html and a codepen example
What I do when I want to find a behaivior or a style in a site is look for the ID or class name in all the javascripts and CSSs. In this case, you can find that the .cog class is being used in the scripts.js file, in which they use the TweenMax plugin to update the cog's rotation. Check that plugin too.
I have been modding a vbulletin forum. All I have modded is the css from within the style editor in the bulletin control panel, plus two template files.
What I have found is that one of the javascript dropdowns is no longer working (it definitely was).
The forum is http://forum.selfbuild.com/
Other dropdowns still work ("community" and "forum actions" links in header) so it relates specifically to the "notifications" dropdown menu item, that you see when logged in.
I have reverted the two template files I modded, but the problem still occurs, so it's not that I have blasted some code out of existence.
On mouseover, rather than the browser showing javascript:// in the bottom bar, it shows a URL.
So I have no idea how to fix it - I don't know how to go about tracing a javascript problem.
Any help appreciated. To log in and see the issue, you can use testuser abc123, and once logged in the notifications menu item appears.
Remove overflow: hidden from .toplinks - then your menu will show.
.toplinks {
background: none repeat scroll 0 0 #DEDEDE;
color: #417300;
float: right;
font: 11px Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
overflow: hidden; <- kill this
text-align: right;
width: 430px;
}
This class was basically hiding everything that wasn't already shown, ie. the drop downs.
This is about the jQuery plugin ConceptMap:
https://github.com/allain/JavaScript-Concept-Map
There is also a rewrite of this plug-in by KNV:
https://github.com/knv/jquery-conceptmap-plugin
These plug-ins draw "concept maps." both demos show the maps at the top of the screen. however, if you put any html elements above the div container holding the map, the elements on the map get all messed up- their positions do not shift properly within the browser window in response to the html elements added at the top of the page.
I've tried contacting both developers for a fix but no response. I've messed around with the javascript code in these plug-ins with no success. anyone out there able to fix it? to reproduce the problem i'm seeing, all you have to do is download either plug-in package and edit the demos. just add an <h1> or any other html element to the top of the page above the <div id="container"> element. you'll see the map gets messed up after that.
thanks
J
the problem in http://knv.github.com/jquery-conceptmap-plugin/textarea.html
is in css,try use
#container {
background-color: #EEEEEE;
position: relative;
}
insteadof
#container {
background-color: #EEEEEE;
}
it must fix your problem, tell me if it is ok 8)