enter image description herePlease help me to fix this issue in IE.
It works fine in Chrome, FF
Please check this URL http://scs-qa.com/panamera/trading.html
<div class="trading-img-box">
<a href = "javascript:void(0)" onclick = "document.getElementById('trading6').style.display='block';document.getElementById('body-below-otherpage-small-trading').style.display='none'">
<img class="trading-img" src="img/trading6.png">
**<a>**
<h1 class="trading-h1">Marble</h1>
<p class="trading-p">We set ourselves at the..</p>
</div>
in this box your not closing your anchor tag.
also add:
<p style="height:0; clear:both;"></p>
to make sure your background wraps properly, you could add overflow:auto instead. But i've ran into issues in opera with that forcing a scroll sometimes.
It is happening due to unclosed anchor <a> tag in trading-img-box <div> having info about Marble
<div class="trading-img-box">
<a href = "javascript:void(0)" onclick = "document.getElementById('trading6').style.display='block';document.getElementById('body- below-otherpage-small-trading').style.display='none'">
<img class="trading-img" src="img/trading6.png">
<a> <<<<<< ------ Unclosed Anchor Tag
<h1 class="trading-h1">Marble</h1>
<p class="trading-p">We set ourselves at the..</p>
</div>
Put overflow:auto on to the element #body-below-otherpage-small-trading
Related
how to access img tag inside a href tag to set focus to <img> tag?
eg:
<a href ='#' ><img class="img1" src="abc.png"/> </a>
The a .img1:focus {} didn't work. Not able to access <img> inside an <a href></a> tag
If I add class to tag, I can add focus to tag but tag & tag are of diff size & causing issue. eg: , then a .test:focus{} is working, But I need focus for tag
You need a space between a and .img1 ( the way you wrote it means "a tag with img1 class" ) this way :
a .img1:focus {}
This means "element with img1 class inside a tag"
EDIT : in the link #jdv provided in the comments of your initial answer, don't focus (pun unintended) on the accepted answer, but on the second one. You can fix your problem by adding a tabindex property to your img tag.
Like this :
<a href ='#' ><img class="img1" src="abc.png" tabindex="0"/> </a>
try out this code
<a href ='#' id='link'><img class="img1" src="abc.png"/> </a>
a#link .img1:focus{}
focus is often associated with form elements like input field I advise you use hover like this instead
a img:hover{
width: 500px;
}
<a><img class="img1" src="http://via.placeholder.com/350x150"/></a>
I am using the angular drag & drop directive on my divs.
I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.
<div class="panel-heading dragHandle">
<h4>Click & drag here to move</h4>
</div>
I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.
<div dnd-nodrag class="panel-body" draggable="true">
<p> THIS IS THE TEXT I WANT TO COPY </p>
</div>
As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.
Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.
Any work arounds? Any directives I am missing? Please help. Thanks ahead!
Also -- I have tried adjusting the user-select styling in the CSS with no luck.
My attempt:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
This issue has been reported in the bugzilla,
Issue Link : https://github.com/react-dnd/react-dnd/issues/178
https://bugzilla.mozilla.org/show_bug.cgi?id=195361
https://bugzilla.mozilla.org/show_bug.cgi?id=800050
However I've fixed this issue using a work around,
When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.
<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
<div dnd-nodrag="" draggable="true">
<div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
<div class="thebody">
Selecting test works on Chrome/Safari. Doesn't work on Firefox/Edge
<input type="text" ng-model="item.label" class="ng-pristine ng-valid">
</div>
</div>
</li>
Workaround :
in html,
<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">
in JS file,
/**
*find li and disable the draggable feature, so the input can be edited using mouse in firefox
*/
vm.disableDrag= function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", false)
}
/**
* find li element and Enalbe the draggable feature, on blur of the editable input
*/
vm.enableDrag = function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", true)
}
I have been trying to do this for a while with CSS and also data attributes but it is driving me up the wall. It's easy to remove data-iconshadow from buttons, but from collapsibles, not so.
In the Developer Console I can see JQM is applying "data-iconshadow='true'" even after I told it not to using this code (in several places):
<div data-role="collapsible-set" data-iconshadow="false">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
Yet it still generates this code:
<span class="ui-btn-inner"><span class="ui-btn-text">0-12 Months<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-arrow-u"> </span></span>
Yeah it is still writing the data-iconshadow to be true. And I'm not even sure how to target injected attributes with CSS so I am not having much luck with that either. If someone could shed some light on the subject, I would be most grateful.
Working example: http://jsfiddle.net/Gajotres/2NCjb/
HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u" id="custom-collapsible">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
CSS:
#custom-collapsible h2 .ui-btn:after {
background: transparent !important;
}
I am making a website that uses div/slides to hold content. They are positioned inside a container with overflow:hidden. A navigation bar uses document.getElementById('box').style.left='0px' to alter the div positions to bring required div into view. The left CSS property is changed 'onclick' to bring the targeted div into view and push the others out of container viewing area. Transitions animations are handled by CSS.
Here a link to the fiddle example. http://jsfiddle.net/HyHmF/1/ . HTML Code is as follows,
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='0px';
document.getElementById('box2').style.left='200px';
document.getElementById('box3').style.left='400px';">Box 1</a>
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-200px';
document.getElementById('box2').style.left='0px';
document.getElementById('box3').style.left='200px'";>Box 2</a>
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-400px';
document.getElementById('box2').style.left='-200px';
document.getElementById('box3').style.left='0px'">Box 3</a>
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
My issue is this. How can I make the browser back button to change the CSS to bring the previous displayed div into view. That is, without reverting back to the 'home' div.
I am reasonably familiar with javascript and jquery. I know the answer lies in JQuery BBQ pushstates and hashtags. Unfortunately I haven't been able to implement these into my site # http://www.sumoto.com.au. The fiddle is basically this site, scaled down, for ease of explaining my dilemma.
Essentially, how can I save a 'snapshot', of the current css view to a hashtag url, and call this 'save' through the browser back/forward navigation?
I solved my problem!
I removed all the cluttered onclick lines from the a elements. And added id's for each one. The actual hashtag/browser back button functionality is provided by hashchange by Ben Alman, and of course, JQuery.
The revised HTML is:
<a class="boxes" id="link1" href="#box_1">Box 1</a>
<a class="boxes" href="#box_2">Box 2</a>
<a class="boxes" href="#box_3">Box 3</a>
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
The Javascript
$(document).ready(function() {
$(window).hashchange( function(){
var hash = location.hash;
var lc1 = $("#link1")
if (lc1.attr('href') === hash) {document.getElementById('box1').style.left='200px';}
if (lc1.attr('href') !== hash) {document.getElementById('box1').style.left='0px';}
});
$(window).hashchange();
});
The a links are targeted by the script and assigned a var; "lc1". An if statement checks if the hash of lc1 (the link) is equal to the browser url. If it is then the css manipulation is performed and the sliding movement occurs. If it isn't (for example when the user clicks back) the boxes return to their original (or previous) conformation.
I'm building an HTML page that uses endless scrolling functionality to render new list elements as you scroll down, like on Facebook. I'm using the jquery.pageless plugin.
The thing is, now testing it on IE7, when I load the dynamic content, none of it is styled like it should be. The first set (20 rows), which the server generated in the html page, look fine. Then the next 20-per-page that are rendered with javascript, don't have any of the styles applied.
How do I fix this? Having a hard time testing it in IE7 from a mac. Is this a problem with IE7? Or could perhaps the elements not be being appended to the correct parent div in IE (using jQuery so I doubt this)? Or is there a common hack for reloading the stylesheets after every dynamically created html element is added?
The doctype is HTML5: <!DOCTYPE html>
Thanks for the advice!
Update:
Looking in the IE7 developer panel, the HTML is being spit out all malformed. The first time around it looks like this:
<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'>
<figure class='snapshot'><time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'><span class='value-title' title='2010-12-16T00:00:00-08:00'></span></time><span></span><img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/heavenly-cleaning-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" />
Like
</figure>
<section class='details' itemprop='seller' itemtype='http://data-vocabulary.org/Organization'>
<header class='header'>
<hgroup>
<h3 class='user fn org' itemprop='name'>
Name<span class='hyphen'>-</span><span class='distance'>Wheaton, IL</span>
</h3>
<h2 class='title'><span class='quotation-mark'>"</span>Quote<span class='quotation-mark'>"</span><time class='expiration-date dtend'><span class='value-title' title='2011-12-16T00:00:00-08:00'></span></time></h2>
</hgroup>
</header>
<p class='highlights'></p>
<p class='description' itemprop='description'></p>
<footer class='footer'>
<address class='location adr' itemprop='address' itemscope='itemscope' itemtype='http://data-vocabulary.org/Address'>
<span class='locality' itemprop='locality'></span>
<span class='geo' itemprop='geo' itemtype='http://data-vocabulary.org/Geo'>
<span class='latitude' itemprop='latitude'>
<span class='value-title' title='41.850249'></span>
</span>
<span class='longitude' itemprop='longitude'>
<span class='value-title' title='-88.0855459'></span>
</span>
</span>
<span class='tel' itemprop='tel'></span>
</address>
Category: Home
</footer>
</section>
</article>
The second time around it looks more like this:
<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'/>
<figure class='snapshot'/>
<time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'/>
<span class='value-title' title='2010-12-16T00:00:00-08:00'/>
</time/>
<a href="/users/25?page_id=25" class="fancy-ajax logo">
<span/>
<img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/name-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" />
</a>
Like
</figure/>
...
I am returning it as a json string and appending it like this:
$(window).load(function() {
var params = paginator;
params.dataType = "string";
$('#content').pageless({
url: window.location.pathname,
params: params,
distance: 500,
totalPages: 10,
loaderImage: "/images/loaders/load.gif",
scrape: function(data) {
var data = $.parseJSON(data);
var paginator = data.paginator;
var search = data.search;
var html = data.pages // html string;
if (data.more == false) {
$.pageless.settings.totalPages = $.pageless.settings.currentPage;
if($.pageless.settings.totalPages <= $.pageless.settings.currentPage){
$.pageless.stopListener();
}
}
$.pageless.settings.params = {dataType: "string", paginator: paginator, q: search.q, c: search.c, l: search.l, a: search.a};
return html;
}
});
})
Since you're using HTML5 elements, I assume you're using HTML5Shiv or Modernizr to hack IE to support those elements?
If not then yes, you will definitely have issues, since IE6/7/8 will simply not recognise those tags as valid HTML.