I was trying to fix the width of the images however, unexpectedly, the navigation pager below disappeared.(pages 1,2,3). I am new to CSS and have no idea what happened. I don't now how to fix this, the navigation codes are still present however I guess it cannot find any space to show up. Can you help?
Code:https://gist.github.com/anonymous/3704b07a027426208738
Website:https://www.alphabitrage.com
I went through your code until I counted about 50 coding errors.
So I ran the source code (from the GitHub link you provided) through the W3C Markup Validation Service, which found 565 coding errors.
This alone suggests multiple problems with your web page and potential difficulties ahead in terms of maintenance and troubleshooting.
However, I understand you're working with a template so recommending that you re-structure your code to be valid and semantically correct (which I would normally do) may not be feasible in this case.
Also, you mention in your comments that the code was working well until you made some adjustments to the widths of images. So I put the errors aside and continued searching for a possible problem.
Providing a link to another website with a working template was a good idea on your part. I was able to compare your code with the code from the other site.
I discovered that your code was missing the divs that render the HTML for the pagination links.
In particular:
<div class="blog-pager" id="blog-pager"></div>
... is completely missing from your code.
Your Site
Other Site
Once you restore that code block your pager should re-appear.
Related
I am having trouble identifying a problem and it is driving me crazy. If this is a poor question or in the wrong place please have mercy, I am exhausted trying to figure this out.
Here is how my website is displaying: My Site
And here is how it is supposed to look:
Archive of Page
Nothing has changed as far as I can tell. I have disabled plugins, re-uploaded them there. My mind is boggled!? It looks the same (code) but appears different. What am I missing!?
I happened to get this as well, what you should do is to redownload the layout, thats what solved my issue. I remember adding 1 line to css and removing it, the layout got stuck and refused to update, so that was my solution. I hope someone else can give you a better one though :)
you have a problem with jQuery in your website.
I think you need to update your theme.
your theme is from 6/2014 and now is 6/2016...
Your js makes all this section on home vertical align to middle. And the js doesn't work now and stay on top.
Update your theme :)
I've been working on this website on my computer for the past several weeks, but have had it a point that I just can't figure something out with my table sorting. The site itself runs off PHP but I've duplicated the HTML output to make it easier for you guys to help me diagnose what the problem is.
Here's a link to the Working Page: http://privateservercloud.com/working.htm
Here's a link to the Not Working Page: http://privateservercloud.com/not-working.htm
If you go to the Working Page, you'll see that you can click on any of the headers of the table and it will sort them. However, if you go to the Not Working Page, you'll see that this doesn't happen.
I'm trying to figure out what's missing or coded incorrectly and causing this to happen. I've uploaded all of the HTML, CSS, and Javascript that's running this part of the site so you can see how it's all working and hopefully that'll make life a bit easier for anyone that can help.
So... does anyone see what I'm doing wrong or know what needs to be fixed?
I load the not-working example in Firefox with Firebug and get the following:
TypeError: document.getElementById(...) is null
...for(var e=0;e<menuids.length;e++){var t=document.getElementById(menuids[e]).getE...
in dropdown.js line 1.
The debugging tools really are your friends. If you don't want to use Firefox, you can do the same thing with the development tools in Chrome.
I find errors when I run rhe validator at http://validator.w3.org and a pile of CSS errors at http://jigsaw.w3.org/css-validator/
When things don't work right, validate the HTML, which at least mostly assures you have a valid DOM. Then validate the CSS and use the JavaScript console in your favorite browser's debugger.
Similar questions, if not exact questions like this have been asked but not often and the answers I have tried to alter with but have had no luck what-so-ever.
Basically, I want to be able to make the content part of my page (so the header remains on each page) change and I'm not sure if this is with anchors using only one html page or if it's multiple html pages or really how it's done at all. Been looking for over 5 hours but to no avail.
I came across this site looking for an answer and it has exactly what I am looking for http://www.aivahthemes.com/themes/gracious/index.html
I looked everywhere and found sites where it did similar things but if you went right by two pages and then went back to the original page, you would see the middle page on the way back. That site above does NOT do this and actually hides the pages between links somehow which is amazing.
This is a bit vague as I havn't posted any code but literally all the code I tried was just from previous questions and it was just me trying to adapt half-answers to what I wanted.
Any help is greatly appreciated, I'm stumped!
Edit:
*Looked a bit more into detail, does look like one whole single HTML page. Why was it so quick to load though if it was an entire page? Thought that would have been a long process.
Edit2:
*Is it also possible to achieve this 'style' by doing it vertically?
The site you listed uses hashes in the URL. You can add them dynamically with javascript or just by using plain anchors. Hash in the url will save it in the browser history and the back/forward buttons will work fine. The only tricky part is reading the hash, which is pretty much straight forward with window.location.hash - it returns everything after '#' sign.
The script for animation/getting pages would be a little bit more complex, but as I see it's all based on getting the right <div id="HASH_FROM_URL">, moving it to 'left: -9999px' and then animating to main container's offsetLeft.
This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).
This is a bit of an odd issue I'm having. I've been using John Resig' micro-templates for a meeting minutes application, and it seemed to work well, but lately I've been having an issue.
Basically the application fetches some JSON from an ajax call, and then uses the templating engine to generate a table with various actions like so:
This works fine, its a little slow in IE (javascript rendering) but it works. However randomly I'll get a stuff up in the display:
notice the gap there, its pushed it out wide, also, its made the rest of the rows squish up. I've tried every CSS/HTML trick I can think of to try and get IE to render it properly, but I'm out of ideas (any suggestions would be great!) . I'm using JQuery Sortable so you can drag each of those rows around, I noticed that when you drag it and place it again, it displays correctly. It's as if it thinks theres an extra TD there, when there isn't.
So I opened the IE developer tools and copied the inner HTML of the HTML element. Pasted this into a HTML file and put it on the server, turned off the JS so it wouldn't reload the elements and ran the page. It displays perfectly, just as in my first image.
So I'm confused as to why IE will render the page fine if the HTML is present from the start, but the templating engine causes odd stuff ups.
I'll probably look at rendering that part of the HTML on the server, and only use the templating where I need to. But has anyone come across this sort of issue before? is there any trick I can do to make it render it as it should?
we had similar problem in our company and our designer solved it. Solution was in concatenating tags one after another without spaces and/or without new line. Code is not looking great after that but still solves problem.
Thanks,
Nikola