At the top of this page: http://andrew-muir.com/search/2/#1 - When you click on the slider it will load new results using AJAX into a div. When i chose certain prices on the slider the results look fine in IE and when i chose other prices the results come back all broken.
Any ideas? Thanks!
There's a lot of invalid markup in the HTML fragment that comes back from the slider actions. You've got some unclosed tags, etc.
Example:
<div style="background-color:#252525; padding:5px 10px; height:130px; position:relative;">
<p class="bold" style="color:#8a96a4; margin-bottom:0.5em;">Blue Lucerne lotus jug</p>
<p class="bold" style="color:#FFF; margin-bottom:0.5em;">£4250</p>
<p style="margin-bottom:0.5em;"><p><strong>Superb and very rare 30cm lotus jug in the bl…</p>
<p class="boldred" style="position:absolute; bottom:0px; left:10px;">View details ></p>
</div>
That line with the "Superb and rare" text has an unclosed <strong> tag.
When I try to look at the broken page in the IE 8 developer tool, it won't show me the content of the main <div>. That's a sure sign that the browser has just thrown up its hands in frustration.
edit — weird; it just started working ...
Related
I am working on a toggle button for enabling/disabling accessibility on a website. Similar to that in iphones.
For example, on the canada.ca government website, they shouldn't have italics but clients rarely consider accessibility when writing their contents.
I was thinking of this idea but I'm not sure if it's a good solution.
Any suggestions/feedback?
You will have to think about everything you wish to change in order to improve "accessibility"... Or be it "readability".
Example:
italic
fonts smaller than __ px
font colors
etc.
So if you taugth about it just a bit, at writting time, by adding some classes... A data attribute can be used to match them and provide a button to toggle these classes out.
Then, the user could "remove those harder to read styles.
$(document).ready(function(){
$("#control button").on("click",function(){
$("*[data-readability]").each(function(){
$(this).toggleClass($(this).data("readbility"));
});
});
});
.small{
font-size:0.4em;
}
.italic{
font-style:italic;
}
.yellow{
color:yellow;
}
#control{
position:fixed;
top:0.5em;
right:0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<span class="small" data-readability="small">This is real small fonts.</span> <span class="italic" data-readability="italic">This is italics.</span> <span class="yellow" data-readability="yellow">This is a hard to read color.</span>
</div>
<div id="control"><button>Click here for a better readability</button></div>
So if all the styling left is not a problem to readbility... And the page still is acceptably nice, that's a way.
Now what can possibly be a problem to readability and accessibility is defined somewhere here.
I think the idea is better than having no accessibility, however by using semantic HTML generally it is not hard to make sites accessible so I would just work on making the page/site accessible as a whole and not only based off a toggle.
I'm trying to figure out out to create a event to appear in front of my home without it opening a new page. It would, for lack of a better word, expand to fill the browser. I know I'll have to do some work with z-index and javascript. The month would hover and then the user would click to see the event.
Home and event
My HTML
<div class= "month sep_box">
<h1 class= "sep">SEP</h1>
<div class= "year">2016</div>
</div>
CSS
.sep_box{
background-image: url("images/design_disrupt.svg");
background-repeat: no-repeat;
background-size: cover;
background-clip: content-box;
background-position: center;
float: left;
width: 25%;
height: 25vh;
transition:.25s ease;
}
EDIT: Screen-shoted HTML now copied
<article>
<div><h1 id="design_disruptors">
DESIGN <br />DISRUPTORS</h1></div>
<div><p class="child_day">THURSDAY</p></div>
<div><p class="child_day_number">15</p></div>
<div><p class="child_event_about">JCM 2121<br />7:00pm</p></div>
<div><p class="child_rsvp">RSVP</p></div>
<div><p class="child_desc">Design Disruptors reveals<br />
a never-before-seen<br />
perspective on the design approaches of these<br />
companies and how they<br />
are overtaking billion dollar industries though design.</p>
</div>
</article>
https://jsfiddle.net/es60r7cv/
The comments aren't going to work at this point because of the character limit, so I'm going to try my best to give you some hints here. I am a little unsure as to how far along you are in your development to this point, and the intent of the design, but let's give it a shot.
Firstly, if I understand your design image correctly, you want almost the entire screen to look different except for the square that was clicked. This is going to be difficult, as you'll need to position a lot of elements in just such a way that you can have a transparency in exactly the right spot. Given your design, and how important pixel-perfection is going to be to making it work, and where you are in your development, I'm wondering if it would be ideal to simply fix the width of the whole design (no growing or shrinking with the screen).
I would also recommend you use jQuery for this project, as it will be easier for you.
To add an event listener to all your month boxes using jQuery, you would write it:
$(document).on('click', '.month', function (evt) {
// your event handling code here
}
I would give each month element an id for the month it represented, then create your overlays with a similar id. So, for example, the December month box would be <div class="month" id="december"><!--your_content--></div> and the overlay for the month could be <div class="overlay" id="decemberOverlay"><!--your_overlay_content--></div>. That way you could target it by getting the clicked month boxes id, and getting the overlay by doing that id + "Overlay".
You could fetch your overlay content on the fly using AJAX, but to reduce complexity for yourself you may just always load all overlays to the page and hide them with CSS, but also include the positioning code:
.overlay {
display: none;
z-index: 10;
position: absolute; /* this will position it to the document, or the first parent that is relatively or absolutely positioned */
top: 0;
left: 0
}
We are using absolute positioning because:
we want to be able to position the overlay directly over the original image, and not influence the flow of the rest of the document, and
z-index requires some non-static position value to be applied
Then, in your script, you would update it do be this:
$(document).on('click', '.month', function (evt) {
var clickedMonth = this.id;
var correspondingOverlay = $(clickedMonth+"Overlay");
correspondingOverlay.show();
}
Based on your fiddle and code, I think perhaps you are not very far along yet. Hopefully this gives you a bit of a head start on how to achieve your desired result.
Edit:
One last thing-- this is a cleaner way to style your markup:
<article>
<div>
<h1 id="design_disruptors">DESIGN <br />DISRUPTORS</h1>
</div>
<div>
<p class="child_day">THURSDAY</p>
</div>
<div>
<p class="child_day_number">15</p>
</div>
<div>
<p class="child_event_about">JCM 2121<br />7:00pm</p>
</div>
<div>
<p class="child_rsvp">RSVP</p>
</div>
<div>
<p class="child_desc">
Design Disruptors reveals<br />
a never-before-seen<br />
perspective on the design approaches of these<br />
companies and how they<br />
are overtaking billion dollar industries though design.
</p>
</div>
</article>
Clean HTML will be easier to read and easier to spot errors.
So basically I am using a jquery plug-in called blueprint split layout. The code for it can be found at: http://tympanus.net/Blueprints/SplitLayout/index.html. I modified the code to fit with my website theme and it worked perfectly, that is until I put it inside a section container with a class of content. Whenever it goes into this container, it ceases to function. However, if I keep this out of the div container, it functions beautifully, but screws the rest of the site layout up. I have searched for days for a solution, and I have tweaked and rebuilt my code to no end with no success. Can anyone please tell me what is going wrong? On another note, I did notice that some of my links are not working either when in this container. I've tried tweaking it to a div container, a section container, and article container, nothing works.
Here is a link to my html: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.html
The code in question is:
<div class="splitcontainer">
<div id="splitlayout" class="splitlayout">
<div class="intro" >
<div class="side side-left">
<div class="intro-content">
<div class="profile_containerL">
<div class="profile"><img src="imgs/profile1.jpg" alt="profile1">
</div>
<div class="h1s"><span>Andrew Mac Gregor </span>Web Designer
</div>
</div>
</div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="profile_container">
<div class="profile"><img src="imgs/profile2.jpg" alt="profile2"></div>
<div class="h1s"><span>Brittney Mac Gregor </span>Web Developer</div>
</div>
</div>
</div>
<Article>
<div class="page page-right">
<div class="page-inner">
<div class="back_R">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Development</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-right -->
<div class="page page-left">
<div class="page-inner">
<div class="back_L">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Design</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-left -->
</div><!-- /intro -->
</div><!-- /container2 -->
</div><!-- /splitcontainer -->
Here is one to my css: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.css
The css code in question is:
.side-left,.side-right{color:#fff;background-image:url(../imgs/ABbg.png)}.page,.side{-webkit-backface-visibility:hidden}.splitcontainer{position:inherit;height:600px;margin-left:auto;margin-right:auto;overflow-x:hidden;z-index:2000}.side{position:absolute;top:0;z-index:100;width:50%;height:600px;text-align:center;background-color:#000}.close-left .side-left,.close-right .side-right,.open-left .side-left{z-index:200}.open-left .side,.open-right .side{cursor:default}.side-left{left:0}.side-right{right:0}.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}.profile{margin:0 auto;width:140px;height:140px;border-radius:50%}.profile img{max-width:100%;border-radius:50%}.intro-content .h1s>span{display:block;white-space:nowrap}.intro-content .h1s>span:first-child{font-weight:300;font-size:2em}.intro-content .h1s>span:nth-child(2){position:absolute;margin-top:.5em;padding:.8em;text-transform:uppercase;letter-spacing:1px;font-size:.8em}.intro-content .h1s>span:nth-child(2):before{position:absolute;top:0;left:25%;width:50%;height:2px;background:#000;content:''}.profile_container,.profile_containerL{padding-top:20px;background-color:rgba(0,0,0,.8);border-radius:20px}.profile_container{box-shadow:2px 3px 5px -1px rgba(255,255,255,.8)}.profile_containerL{box-shadow:-2px 3px 5px -1px rgba(255,255,255,.8)}.side-right .intro-content h1>span:nth-child(2):before{background:#000}.back_L{float:left}.back_R{float:right}.back_L img{float:left;width:50px;height:50px}.back_R img{float:right;width:50px;height:50px}.back_L img:hover,.back_R img:hover{opacity:.4}.mobile-layout .back{position:absolute}.back-left{left:12.5%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.back-right{right:12.5%;-webkit-transform:translateX(50%);transform:translateX(50%);color:#fff}.open-left .back-right,.open-right .back-left{visibility:visible;opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;pointer-events:auto}.back:hover{color:#ddd}.page-left,.page-right{background:#000;color:#fff}.page{position:absolute;top:0;overflow:auto;min-height:100%;width:75%;height:600px;font-size:1.4em}.page-right{left:25%;outline:#000 solid 5px;-webkit-transform:translateX(100%);transform:translateX(100%)}.splitlayout.open-right{background:#000}.page-left{left:0;outline:#fff solid 5px;text-align:right;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.splitlayout.open-left{background:#fff}.page-inner{padding:2em}.page-inner .section{padding-bottom:1em}.page-inner .h2s{margin:0 0 1em;font-weight:300;font-size:2em;font-family:audiowide}.page-inner p{font-weight:200;font-size:.8em}.page,.side{-webkit-transition:-webkit-transform .6s;transition:transform .6s}.overlay{-webkit-transition:opacity .6s,visibility .1s .6s;transition:opacity .6s,visibility .1s .6s}.intro-content{-webkit-transition:-webkit-transform .6s,top .6s;transition:transform .6s,top .6s}.intro-content h1,.reset-layout .page,.splitlayout.close-left .page-right,.splitlayout.close-right .page-left,.splitlayout.open-left .page-right,.splitlayout.open-right .page-left{position:absolute;overflow:hidden;height:600px}.splitlayout.open-left .page-left,.splitlayout.open-right .page-right{position:absolute;overflow:auto;height:600px}.open-left .side-right .overlay,.open-right .side-left .overlay{visibility:visible;opacity:1;-webkit-transition:opacity .6s;transition:opacity .6s}.open-right .side-left{-webkit-transform:translateX(-60%);transform:translateX(-60%)}.open-right .side-right{z-index:200;-webkit-transform:translateX(-150%);transform:translateX(-150%)}.open-right .side-right .intro-content{-webkit-transform:translateY(-50%) translateX(0) scale(.6);transform:translateY(-50%) translateX(0) scale(.6)}.open-right .page-right{-webkit-transform:translateX(0);transform:translateX(0)}.open-left .side-right{-webkit-transform:translateX(60%);transform:translateX(60%)}.open-left .side-left{-webkit-transform:translateX(150%);transform:translateX(150%)}.open-left .side-left .intro-content{-webkit-transform:translateY(-50%) translateX(-100%) scale(.6);transform:translateY(-50%) translateX(-100%) scale(.6)}.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .1s .3s;transition:opacity .3s,visibility .1s .3s}.open-left .page-left{-webkit-transform:translateX(0);transform:translateX(0)}
The javascript being used for this site can be obtained from blueprint site listed above The two names of the javascript files are cbpSplitLayout.js and Classie.js, as well as the included modernizer.js file from the site.
Can anyone please help me figure out why javascript would stop once the plug-ins html is placed in the main wrapper section? Thanks in advance.
Well it's been a few days and I want to I guess provide my own answer to my question. I don't have the "exact" answer, however, this is what I have found to fix the issue. The original issue was that every time I placed my jquery coded html inside the main wrapper div, the jquery functions would not work at all. Basically I'm building a parallax one page site that has multiple slides. The second slide from the header has the jquery plug in that is suppose to have two profile pics on it. One side for the developer and one for the designer. When either profile is clicked, depending on which one, the plugin is suppose to make the page slide open either left or right. Upon clicking the "x" I put inside the inner page, the page refreshes and shuts the sliding profile.
I noticed that when this was placed inside the main wrapper div that the rest of my content was in, it ceased to function. I still cannot explain why that is. However, if I placed it on the outside of the wrapper, it would automatically become fixed at the top, blocking my fixed header. That I cannot explain either. I tried creating two different wrappers, one for the first slide, leaving the jquery code out of that wrapper, then another wrapper to place the remaining content in, but still the jquery code would just become fixed to the top of the screen and block the header. It would work, mind you, but completely wrong positioning. So... my solution, although perhaps not the right one to the issue, was to re-create all the html code. This time, I added each slide 1 at a time and messed about with the positioning finally getting the whole page to function correctly when in a relative position, aside from my header and footer being fixed. Now the plug-in works beautifully and the page is taking shape into what I wanted it to be. So... my conclusion, although I can't explain the details, is that when using a jquery plugin, the positioning of that part of html code that responds to the js, relies on positioning. Apparently the only positioning that would work in my case was relative. Another guess as to why this could be was because the plug-in was designed to be a one full page plug-in and I tweaked the html to get it to fit in a 1903px width by 600px height container. Hopefully this will help someone out there struggling with the same issue.
I want to share my twitter button on the blog posts. It is working fine in 18 posts out of 20. Only 2 posts have problems. The blank window appears on clicking the button with no text, url and via etc...
The URLS
National Tour Announced For Disney’s The Little Mermaid
MLB Venues – How A Team’s Form Is Effecting Ticket Prices At Their Homes
Is my code good or what happened here ? Please assist me.
.tweet{ margin:0px auto; width:200px; text-align:center;}
.tweet a{ display:inline-block; line-height:50px; color:#f00; text-decoration:none; background:#ccc; border-radius:5px; padding:0px 20px;}
<div class="tweet">
<a title="Twitter" href="//twitter.com/intent/tweet?share=" onclick="tweetShare=window.open(this.href+escape(window.location)+'&text='+escape(document.getElementsByTagName('title')[0].innerHTML)+'&url='+location.href+'&via=ExciteEventstix','tweetShare','toolbar=no,status=no,width=640,height=400,scrollbars=no'); return false;"
target="_blank">Twitter</a></div>
Looking at Chrome Developer console you will find out twitter server returned a 400 error. That was because you didn't encode the url (especially, the title parameter) correctly.
Note the %u2019 character after the Disney. Its an encoded unicode character. Actually twitter expects you encode it as UTF-8.
text=National%20Tour%20Announced%20for%20Disney%u2019s%20The%20Little%20Mermaid
The solution is to use encodeURIComponent() instead of escape(). This code should work fine:
<div class="tweet">
<a title="Twitter" href="//twitter.com/intent/tweet?share=" onclick="tweetShare=window.open(this.href+encodeURIComponent(window.location)+'&text='+encodeURIComponent(document.getElementsByTagName('title')[0].innerHTML)+'&url='+location.href+'&via=ExciteEventstix','tweetShare','toolbar=no,status=no,width=640,height=400,scrollbars=no'); return false;"
target="_blank">Twitter</a></div>
Anyway escape() is deprecated so please try encodeURIComponent instead.
BTW
There's no share parameter supported in tweet button documentation. url is enough.
document.title works as perfect as the long version document.getElementsByTagName('title')[0].innerHTML.
Don't create an extra global variable tweetShare, if not used.
So this may be simplified as:
<div class="tweet">
<a title="Twitter" href="javascript:window.open('https://twitter.com/intent/tweet?url='+encodeURIComponent(location.href)+'&text='+encodeURIComponent(document.title)+'&via=ExciteEventstix','tweetShare','toolbar=no,status=no,width=640,height=400,scrollbars=no')">Twitter</a></div>
Using this plugin works great, but when I stop the scroll fixed position, it creates the following div.
<div style="display: block; width: 1621px; height: 104px; float: none;"></div>
The dimensions resemble to size of the div being scrolled.
Example: http://litl.it/ simply scroll past the maps area, then scroll back up and there will be an odd blank space.
Anyone know how to remove this issue? I've found one other example that has been closed, but the issue was resolved with a work around creating extra containers, with additional css to comply with the 'random' div created. I'd like to avoid that if possible.
code:
<section id="devices" data-speed="10" data-type="background">
<h1>litl.it now, bookmark it for later</h1>
<p>we provides an easy link shortening solution with better features above the competition, you can now shorten & bookmark your links with control.
</section>
<section id="demographic" data-speed="7" data-type="background">
</section>
<div id="mapoverlay">
<div class="mapcontainer">
<h1>litl.it it records data of your audience</h1>
<p>here you can see litl.it users litling links across the world!</p>
</div>
</div>
<section id="trackstats" data-speed="4" data-type="background">
<h1>Tracking Stats</h1>
</section>
This issue occurs in the Windows Chrome browser (based upon additional comments from users), here is an example:
Edit: it occurs for me in all browsers, maybe the issue is due to the window being too large, resulting in the bottom of the page preventing the scroll from passing over the target div.
Can I please ask you to attempt creating the issue with a small window to ensure the scrolling div passes over the tracking stats box.