I got this show all thing succesfully done, but now when I click Show all and then click the text or image that opens, it puts the text below to right side of the screen.
JSFiddle
Gyazo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function () {
$('.toggle-all').click(function() {
$('.printer').each(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
});
});
});
</script>
<style>
.gwinfo {
display: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.left{
display: block;
float:left;
width:10%;
}
</style>
General: Rest of code in JSFiddle, feel free to fix some of my code, I would appreciate that a lot. Also if you manage to fix my code, please post a JSFiddle link with fixed code. Thank you a ton, guys!
Instead of using the break tag to clear your floats, use a div. I also fixed some tags that were not properly nested.
<div style="clear: both;"></div>
http://jsfiddle.net/z2tSd/5/
Guess the tags are mis-matched.. Can you change your HTML to the one as below:
<div class="gwshowhide">
<li><a class="printer">Money Printer</a>
<div class="gwinfo">Level Requirement: 1
<br>Price: $1000
<br>Production:
<br>
<img src="images/shop/Amber Money Printer.png">
</div>
</li>
</div>
The existing one's are like where <li> tags are mismatching:
<div class="left">
<div class="gwshowhide">
<li><a class="printer">Money Silo</a>
<div class="gwinfo">Level Requirement: 85
<br>Price: $10,000
<br>Production:
<br>
<img src="images/shop/Diamond Money Silo.png">
</div>
</div>
</li>
</div>
Not sure if this will fix your issue though.. but you can give a try..
Also make sure you are suppressing the bullet list items using the style below:
.gwshowhide {
list-style:none;
}
Related
This question already has answers here:
Why is this jQuery click function not working?
(9 answers)
Why document.ready is used in jQuery
(4 answers)
Closed 3 years ago.
In codepen https://codepen.io/mkliver/pen/oKbENd i got working script.
When i copy this code on my localhost nothing works. My code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Welcome to Foundation</title>
<link rel="stylesheet" href="stylesheets/collapsable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('.tree .question').click( function() {
$(this).parent().toggleClass('expanded').
closest('li').find('ul:first').
toggleClass('show-effect');
});
</script>
</head>
<body>
<ul class="tree">
<li class="tree__item hasChildren">
<span>
<div class="icon"></div>
<a class="question">Question 1</a>
</span>
<ul>
<li>
<span>Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</span>
</li>
</ul>
</li>
</ul>
</body>
collapsable.css same as on codepen.
What can be wrong?
Try moving the <script> to just before </body> or wrapping it in an additional $(), which is jQuery's shortcut for $(document).ready()
You must put your script right before the body tag close. The problem that was being caused is because the script is being loaded before the actual elements being selected and manipulated.
Hope this helps!
Here is a minimal index.html file to open in a local browser, my guess is because you didn't use jQuery's $('document').ready() function, and didn't include the script at the bottom, it tried to apply your callback function to an empty DOM.
index.html
<style>
body {
font-family: Helvetica, sans-serif;
font-size:15px;
}
a {
text-decoration:none;
}
ul.tree, .tree li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
.tree ul {
display:none;
}
.tree > li {
display:block;
background:#eee;
margin-bottom:2px;
}
.tree span {
display:block;
padding:10px 12px;
}
.icon {
display:inline-block;
}
.tree .hasChildren > .expanded {
background:#999;
}
.tree .hasChildren > .expanded a {
color:#fff;
}
.icon:before {
content:"+";
display:inline-block;
min-width:20px;
text-align:center;
}
.tree .icon.expanded:before {
content:"-";
}
.show-effect {
display:block!important;
}
</style>
<body>
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="eight columns">
<ul class="tree">
<li class="tree__item">
<span>
Вопросы
</span>
</li>
<li class="tree__item hasChildren">
<span>
<div class="icon"></div>
<a class="question" href="#">Вопрос 1</a>
</span>
<ul>
<li>
<span>Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</span>
</li>
</ul>
</li>
<li class="tree__item hasChildren">
<span>
<div class="icon"></div>
<a class="question" href="#">Вопрос 2</a>
</span>
<ul>
<li>
<span>So I soldiered on and came up with a pretty decent attempt, and remember folks I’m not a designer so be kinder this time with design critiques all I’m doing is showing you how to do the technique ;). With that out of the way let’s dig into the inner workings and road blocks I faced.</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('.tree .question, .icon').click( function() {
$(this).parent().toggleClass('expanded').
closest('li').find('ul:first').
toggleClass('show-effect');
});
</script>
</body>
I would like to get my page to display the current tab in the URL, please keep in mind I'm still learning, so my coding skills are not the greatest. I would normally use PHP for this, but I've been asked to stick to Javascript/JQuery.
So far, I've managed to get my tabs to display content dynamically within a div by using a simple script.
This is my index bit:
<div class="row">
<div class="col-md-3 col-lg-3">
<div class="custom-left-tabs -text--uppercase">
<div class="custom-left-tabs-btn hidden-lg hidden-md">
Menu<i class="fa fa-angle-down"></i>
</div>
<ul id="lefttabs" class="list-unstyled collapse">
<li class="sub-heading">Getting Started</li>
<li><a data-toggle="tab" href="pages/first.html">First</a></li>
<li><a data-toggle="tab" href="pages/second.html">Second</a></li>
</ul>
</div>
</div>
<div id="content" class="tab-content col-lg-9 -bg--white -padding--m">
</div>
</div>
This is my script:
$(document).ready(function(){
$("#content").load("pages/first.html");
});
$("li").find('a').click(function(){
var page = $(this).attr('href');
$("#content").load(page);
return false;
});
Ideally I would prefer not having all content chucked into one page. I've checked many similar questions/videos, but I can't really find the missing bit.
My question is really how should I write a script that does this extra bit of displaying the current tab on the URL.
Here this thing can be done using iframe which works well,
but as you suggested i have tried it. here is my code.
reference same as you gave before.
Now i am showing code here
use js in this manner:
<script src="jquery.min.1.4.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
$(function(){
$("#tabs a").click(function(e){
$("#tabs li").removeClass("on");
$(this).parent("li"). addClass("on");
var page = this.hash.substr(1);
$("#content_wrapper").block();
$.get(page+".html",function(html){
$("#content").html(html);
$("#content_wrapper").unblock();
});
});
});
</script>
and html code with "<div>" tag.
<ul id="tabs">
<li>TAb1</li>
<li>TAb2</li>
</ul>
<div id="content_wrapper">
<div id="content">
</div>
</div>
i have also used jquery.min.js and blocjUI.js and css
css code is here
<style>
ul {
margin:0px;
padding:0px;
overflow:hidden;
}
li {
float:left;
list-style:none;
padding:10px;
background-color:#333;
border: 1px solid #ccc;
}
li a {
color: #FFF;
text-decoration:none;
font-family:arial;
}
#content_wrapper {
width:400px;
height:300px;
background-color: #ccc;
margin: 0px;
padding:6px;
overflow: hidden;
}
#content {
font-family: arial;
}
li.on {
background-color:#ccc;
}
li.on a {
color:#333;
}
and you will get two different page in one page.
Scrren1:
screen2:
Thanks for taking a look at my question.
I'm trying to be able to hover over portfolio items but I need to loop through them using each() because I need some way of identifying each item.
I'm trying to hover over .recent-work-item to show .recent-work-item__overlay the .show-none class does display:none;
Neither the hover nor the on.("mouseenter", function(){}) is working.
Here is the HMTL:
<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>">
<div class="recent-work-item__overlay show-none">
<h3 class="color-white bolder-font"><?php the_title(); ?></h3>
VIEW CASE
</div>
<div class="recent-work-img">
<img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait">
</div>
Here is the jQuery:
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
console.log(thisid);
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(thisid).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(thisid).find('.recent-work-item__overlay').addClass('show-none');
});
});
This is not working, I can't get the hover to work and all I want to do is add or remove a class, can I not do this in each().
I've researched thoroughly in StackOverflow but can't find an answer. I would REALLY appreciate any help I can get on this.
I have test your code in my codepen, and the problem you should use $(this) than use $(thisid)
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(this).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(this).find('.recent-work-item__overlay').addClass('show-none');
});
});
Here look at my codepen
Here I have added an example that shows how you could use CSS to show/hide elements. It might not give you exact answer to your problem, but it will help you change your stylesheets as per your requirement.
Essentially, as per the discussion in comments, I don't think you need javascript to design the page the way you need it.
.container {
padding: 10px;
border: 1px solid gray;
}
.container > .hideOnHover {
display: block;
}
.container > .showOnHover {
display: none;
}
.container:hover > .hideOnHover {
display: none;
}
.container:hover > .showOnHover {
display: block;
}
<div class="container">
<div class="hideOnHover">
This text will be hidden on hover.
</div>
<div class="showOnHover">
This text will be shown on hover.
</div>
</div>
To solve this problem, i had the idea to create a css class to add the image and when i click on "li", i add the class to it. But for some reason, it just doesnt work. The row appear properly in the ui-grid, but when i click on it, the image doesnt appear. I already tested the onclick() event with an alert() and the function is called.
Since i begin in these languages, i just feel like im assuming things (for exemple, does $(this) really refer to the "li" tag?). If anyone have an idea, it would be appreciated. Here is my code :
CSS
checked
{
background: url('images/checked.png') no-repeat right scroll;
list-style: none;
}
JS
function isChecked()
{
alert("test");
$(this).addClass("checked");
}
HTML
<li class="addedParts" onclick="isChecked()">
<a href="javascript:addParts();">
<div class="ui-grid-solo">
<div class="ui-block-a">test</div>
</div>
</a>
</li>
this will refer to window in your example as context is not passed.
Try this:
function isChecked(elem) {
$(elem).addClass("checked");
}
.checked {
background: url('images/checked.png') no-repeat right scroll;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="addedParts" onclick="isChecked(this)">
<a>
<div class="ui-grid-solo">
<div class="ui-block-a">test</div>
</div>
</a>
</li>
Edit: Added Javascript and Masonry tags. I've been looking at masonry and all my modules are the same size so I'm not sure how masonry can help me as I'm not trying to get different size elements to line up. I'm still looking through masonry tutorials as it's a little confusing at the moment. If this is the fix I apologize for adding the additional tags.
I'm creating three divs offline, issues, and then go. I'm taking what I'm calling modules and placing them within these three divs. When I place more than 3 modules they create another row. Unfortunately my titles don't move with the modules and I have to manually go in and change the margin-top to line everything up. I'm not sure how to make it to where the issue rows will change based on how many modules are in there. Any help would be greatly appreciated.
<div class="grid_17">
<div id="offlinetitle">
<p>System is Offline</p>
</div>
<div id="issuestitle">
<p>System is partially offline or experiencing issues</p>
</div>
<div id="issuescontents">
<a href="#" class="big-link" data-reveal-id="AccessModal" data-animation="none">
<div class="grid_3">
<p id="contexttitle">Access</p>
<p id="accesssubmenu">Last Update: 08/30/2013 5:00pm</p>
</div>
</a>
<div id="AccessModal" class="reveal-modal">
<h1>Access</h1>
<p>This is text to describe something>
<p4>Last Update: 08/30/2013 5:00pm</p4>
<a class="close-reveal-modal">×</a>
</div>
</div>
<div id="gotitle">
<p>All systems go</p>
</div>
</div>
My CSS is as follows grid 17 is the parent container that everything is in then the last container is the actual modules.
.grid_17{
}
#offlinetitle{
color:#FFF;
font-size:25px;
background:#F00;
height: 35px;
text-decoration:none;
list-style:none;
}
#issuestitle{
color:#FFF;
font-size:25px;
background:#FC0;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:15px;
}
#gotitle{
color:#FFF;
font-size:25px;
background:#093;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:535px;
}
.container_24 .grid_3 {
width: 213px;
background:#CCC;
height:55px;
margin-top:10px;
}
If more information is needed please let me know. Thank you for your help!
You need to wrap each "module" (title and contents) in it's own div and then float this parent div to the left. Something like this:
<div class="grid_17">
<div>
<div id="offlinetitle">...</div>
</div>
<div>
<div id="issuestitle">...</div>
<div id="issuescontents">...</div>
</div>
<div>
<div id="gotitle">...</div>
</div>
</div>
With CSS similar to:
.grid_17 { width: 300px; }
.grid_17 > div { float: left; width: 100px; height: 100px; }
Note about clearfix: If you display anything after the grid_17 div, you'll also need to clear the float. I won't go into depth here, but you might want to look up the clearfix class.