I've got some JavaScript which is making my whole page clickable through what I though was the container element. However, when I tried reducing its size, amd reducing the size of the associated widget, even the footer is clickable. Although the footer doesn't toggle according to the JavaScript code, it does toggle in as far as it reacts to the a href "#" and takes user to the top of the page when they are trying to select an element/link in the footer.
So how can I can I get the footer to stop being clickable? The page itself seems only to react when clicking elements on it, but almost the whole footer area is reacting to href#
<a id="mni" href="#">
<div class="container4" onclick="myFunction(this)">
<div class="nimageone">
<img src="http://4309.co.uk/wp-content/uploads/2020/05/IMG_20200509_165113-1-219x300.jpg" alt="" width="350" height="300" c.class="size-medium wp-image-14178" /></div>
</div>
<script>
function myFunction(x){
x.classList.toggle('change');
}
</script>
</div>
Css
.change
.nimageone img {display:none}
desktop here
You have not included the tree structure of your HTML element comprehensively.
You can achieve what you are trying to do with the following.
<div>
<a id="mni" href="#">
<div class="container4"
onclick="myFunction(this)">
<div class="nimageone"><img
src="http://4309.co.uk/wp-
content/uploads/2020/05/IMG_20200509_165113-1-
219x300.jpg" alt="" width="350" height="300" class="
size-medium wp-image-14178" /></div>
</div>
</a> //remember to close the <a> tag here before the
footer item
/////Your footer item can come below here
<footer>
</footer>
</div>
If you want to adjust the size of the button in the HTML you can set it just like you set the width and the height attributes in the 'img' tag.
Related
I'm trying to hide my logo only on one div and show it on another. In one of my sections, I have a video so I do not need to show my logo. I cant however do it at all. It either just hides forever or just does not want to hide at all.
I have tried both style="" inside the div and jquery. None of which works.
My HTML structure:
<!-- HEADER -->
<header id="header" class="header-left">
<div class="header-inner clearfix">
<!-- LOGO -->
<div id="logo" class="logo-left">
<a href="index.html">
<img id="dark-logo" src="files/uploads/logo_dark.png" srcset="files/uploads/logo_dark.png 1x, files/uploads/logo_dark#2x.png 2x" alt="Logo Dark">
<img id="light-logo" src="files/uploads/logo_light.png" srcset="files/uploads/logo_light#2x.png 1x, files/uploads/logo_light#2x.png 2x" alt="Logo Light">
</a>
</div>
<!-- MAIN NAVIGATION -->
<div id="menu" class="clearfix">
<div class="menu-actions">
<div class="menu-toggle"><span class="hamburger"></span></div>
</div> <!-- END .menu-actions -->
<div id="menu-inner">
<nav id="main-nav">
<ul>
<li>xxx
</li>
<li>xxx
<ul class="sub-menu">
<li>xxx</li>
<li>xxxx</li>
<li>xxx</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<span class="pseudo-close header-close"></span>
</header>
Ok so before I show the source, here is what works:
<style>#logo img{opacity:0;visibility:hidden;}</style>
Pretty standard right? So I tried hiding the logo in this same way into a section and it did not work. Example:
<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">
....
</section>
I then tried jQuery to hide the logo as a test. This did not work at all. Example:
<script src="files/js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#logo").css({
display: "none",
visibility: "hidden"
});
$("#logo").hide();
</script>
What I was hoping to do is hide the logo in a single div then show it for the rest of the page. I had an idea to do this with jQuery or a section. Anyone have any ideas on how to do this?
style="#logo img{opacity:0;visibility:hidden;}"
This is not a valid HTML style attribute. It's a selector for CSS that should be nested under the HTML's <style> tag.
When setting an element's style attribute, you only need to write the style properties. This is how it should look:
style="opacity:0;visibility:hidden;"
Your jQuery attempt to hide the logo should work when you remove the logo element's style tag. Doing $('#logo').hide(); should work and is enough.
A few notes:
Using opacity:0; with visibility:hidden; doesn't make sense. Use either one of them, both make the element invisible.
You can just write $('#logo').hide();, no need to the whole $("#logo").css({ section.
You can shorthand $(document).ready(function(){ to just $(function() {
Keep in mind using visibility:hidden; keeps the element inline the page, but invisible. If you want to make it disappear completely, use display:none;
You can't write inline style to another element.Inline styles are applicable to the element itself.
This is the right way
<style>#logo img{opacity:0;visibility:hidden;}</style>
This is not possible
<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">
....
</section>
Try
section #logo img{opacity:0;visibility:hidden;}
I have made a plugin which uses click events, however sometimes my clickable element may be within an A link, however it might not be a direct child, is there a good way to stop the a link from firing whilst not knowing it's position?
For example:
<div id="lightbox">
<a href="">
<div class="twocol">
<img src="http://www.ducati.com/cms-web/fs//MediaGalleries/345/MediaGallery_345008/SBK-1199Panigale-S_2012_Studio_Tricolore_B01_1920x1280.jpg/SBK-1199Panigale-S_2012_Studio_Tricolore_B01_1920x1280.mediagallery_output_image_[1920x1080].jpg" alt="Ducati Panigale 1199 - Image 1" class="responsive-img">
</div>
</a>
<a href="">
<div class="twocol">
<img src="https://www.asphaltandrubber.com/wp-content/gallery/ducati-1199-panigale-r-launch-with-jensen-beeler/ducati-1199-panigale-r-launch-cota-jensen-beeler-07.jpg" alt="Ducati Panigale 1199 - Image 2" class="responsive-img">
</div>
</a>
</div>
I'm not really sure if your clickable element is always in a element with a class name.
But one way to do it is to check if the parent is a <a> tag and add event.preventDefault.
I am developing a single page app using js/handlebars/phonegap. In the beginning the architecture was multiple pages using jquery mobile to do slide or flip effects using the standard data-transition="slide" attribute on tags. Pretty standard stuff. Since then i have switched over to handlebars and the architecture has become single pages with content loading into a container div.
<div data-role="page" id="mealplans">
<div data-role="header" id="header" data-position="fixed">
<div class="center-wrapper">
<img src="img/logo.png" width="40" height="40"/>
</div>
<div class="accountMenu">
<img src="img/menu.png" width="30" height="30"/>
</div>
</div>
<div id="container" data-role="main">
</div>
</div>
My page content is injected into the "container" div using append or innerHTML commands.
What i want is to have transitions between content loads where it looks like a slide effect. But since i only have one container that i am changing the inner content of then i am sure i would need something like a second container ?
I have been following this post http://coenraets.org/blog/phonegap-tutorial/ but i am not sure how it plays out with my content being loaded in a specific div.
Basically i want to show a slide effect on the content that is loaded in the "container" div.
Can someone help me digest the link above and apply to my architecture.
thanks in advance.
I am trying to use jquery plugin Color Box: http://www.jacklmoore.com/colorbox/
HTML:
<center>
<div class='images'>
<a class="group1" href="http://placehold.it/250x150" title="Фотография 1"><img src='http://placehold.it/250x150'></a>
<a class="group1" href="/media/images/background.jpg"> <img src='http://placehold.it/250x150'></a>
</div>
</center>
JS:
$(".images img").colorbox({rel:'images', transition:"fade"});
When I click to image black blank screen is appearing, black box, where picture must be situadted, appearing, icon loading constanlty spinning and image is not loading. There are no any errors or messages. Only icon loading.
How I can solve this problem?
Try this code:
$(".images > .group1").colorbox({rel:'images', transition:"fade"});
Try this:
<div style="text-align:center;">
<div class='images'>
<a class="group1" rel="images" href="http://placehold.it/250x150" title="Фотография 1"><img src='http://placehold.it/250x150'></a>
<a class="group1" rel="images" href="/media/images/background.jpg"> <img src='http://placehold.it/250x150'></a>
</div>
</div>
What I did here
Added a rel attribute to the images with the value images to match your code.
Note: <center> is deprecated. Use <div style="text-align:center;"> instead.
$(".images a").colorbox({rel:'group1', transition:"fade"});
Rel should make reference to the class ("group1"), and the plugin is applied to the < a > element, not the < img > inside it
http://www.jacklmoore.com/colorbox/example3/
I have this for changing the background image of div.fullscreen:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover="document.images['bigPic'].src='http://josefsipek.net/docs/s390- linux/hercules-s390/ssh-dasd1.png';"
width="72" height="54" alt="Item ksc1" />
</a>
</div>
However, is there a way to change the background image of a table on hover of another image link?
Sure, look at an example here.
This is done by giving the img an id and the table an id. Then we listen for when the mouse is over the img and when it does, change the background-image of the table.
Only want to use inline JavaScript? Use this:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover='document.getElementById("table_id_here").style["background-image"]="url(\'http://www.gravatar.com/avatar/\');'
width="72" height="54" alt="Item ksc1" />
</a>
</div>