I want to make gallery view using jqtouch js library so I try to insert image using function the it show nothing but when am not using function then it work properly , also used document.getElementById("#").innerHTML it nor working when I simply insert image it show so plz help
<script>
function fun(){
$("#thumbs_container").append('<ul id="thumbs" class="thumbView" style="display:none;"><li class="pic"><img src="thumbs/1.jpg" alt="images/1.jpg" title="this is a description"/></li></ul>');
}
</script>
<body onLoad="fun();">
<div id="about" class="selectable">
<p><img src="codropsIcon.png"/></p>
<p>
<strong>Wonderwall Image Gallery</strong>
By Codrops
</p>
<p>A web app created with <br /> <strong>jQTouch</strong></p>
<p><br /><br />Close</p>
</div>
<!-- The list of images (thumbs) -->
<div id="thumbs_container" class="current">
<div class="toolbar">
<h1>Thumbs</h1>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<!--<ul id="thumbs" class="thumbView" style="display:none;">
<li class="pic"><img src="thumbs/1.jpg" alt="images/1.jpg" title="this is a description"/></li>
<li class="pic"><img src="thumbs/2.jpg" alt="images/2.jpg" title="great!"/></li>
</ul>-->
</div>
<!-- The single image container -->
<div id="photo_container">
<div class="toolbar">
<h1>Photo</h1>
<a class="back" href="#thumbs_container">Photos</a>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<div class="loader" style="display:none;"></div>
<div id="theimage" class="singleimage"></div>
<div class="descriptionWrapper">
<p id="description"></p>
<div id="prev" style="display:none;"></div>
<div id="next" style="display:none;"></div>
</div>
</div>
</body>
</html>
You have style="display:none; set within your function. Remove this and it should work ok.
1) You need to include jQuery in your page. Maybe you copypasted just an part of your file, but make sure you do something like this to include jQuery:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
2) The HTML you are appending has the following attribute:
style="display:none;"
So even if this works, you will not see the image.
3) Finally, make sure the image you are trying to show exists.
Related
I have a horizontal grid consisting of 3 image squares - The action that I am trying to produce is when any grid section is clicked, the user will be anchored down to a slideshow box that is being displayed below the grid. the first bit of HTML that I have pasted below is one grid (there will be 3) - and the section section of HTML is the slideshow section. Since I cant use the same ID tag multiple times in HTML, I believe I will need to use some for of Javascript or jQuery to take the user from the grid on click to the . Could anyone help me figure out how to do that?
<div id="grid-item" class="grid-item grid-item-1">
<div class="grid-project">
<img class="profile-image" src="img/image1.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 1</h4>
<p class="project-categories">description 1</p>
</a>
</div>
</div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
<div class="grid-project">
<img class="profile-image" src="img/image.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 2</h4>
<p class="project-categories">description 2</p>
</a>
</div>
</div>
</div>
<div id="slideshow" class="slideshow">
<div class="slideshow_inner">
<a name="project-link" class="anchor">
<img src="img/slide_img_1.png">
</div>
</div>
If you're using id="" you can't use same id twice... Each element should have different id name. Change this in the second grid:
<a href="#project-link" id="toggle">
to this:
<a href="#project-link" id="toggle2">
and don't use same id twice...
Also, you have used name="" in the second section of your html, instead of id:
<a name="project-link" class="anchor">
I have two forms and each form has different a tag, but when I use Javascript to use a tag different form, I can work on the a tag from the first form. How can make Javascript so that I can work on different a tag from different forms.
My codes are shown below.
Form to sell
<body>
<form class="summarybackground" name="sell" id="sell" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
Form to rent
<form class="summarybackground" name="rent" id="rent" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav-sec">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
</body>
This script can work on the first form's a tag only.
<script>
$('a').click(function () {
$('a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
How to make a script so that I can work on both forms?
Find your a using it's parent
<script>
$('#rent a').click(function () {
$('#rent a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
You can do similar thing for your next form
I'm not really experienced with jQuery but I couldn't find an answer for this. What I exactly want to do is when people click on the img with the class machine-dropdown that the div overview does slideToggle. I got multiple lists on this page with the same construction so I need them to work individual.
<img class="machine-dropdown" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
I tryed it with many methods that jquery already has. .closest .first .find but still when i click it slides all lists.
Thanks for the help already!
You could do it like this:
Change your HTML to this:
<img class="machine-dropdown" data-target="#overview-1" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview" id="overview-1">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
Note that I've added data-target="#overview-1" to the machine-dropdown image and id="overview-1" to the overview div.
Now use the following javascript/jquery:
$(function(){
$(".machine-dropdown").each(function(){
$(this).click(function(){
var target = $(this).data("target");
$(target).slideToggle();
});
});
});
use this attribute in your code.
$('.machine-dropdown').click(function(){
$(this).next().next().next().find('.overview').slideToggle();
});
I think it will solve your problem.
I want to have a button inside a ContentPane but I can't get it rendering. I have the same code for display the button inside a ContentPane and outside everything, in the body. The first one doesn't get rendering and the second one does, so it doesn't display the correct way and it doesn't fire events. The code for the button is:
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconTask', onClick:function(){ console.debug('clicked simple') }">Simple</button>
And the code:
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconTask', onClick:function(){ console.debug('clicked simple') }">Simple</button>
<div data-dojo-type="dijit/MenuBar">
<div data-dojo-type="dijit/PopupMenuBarItem">
<span>Sesión</span>
<div data-dojo-type="dijit/DropDownMenu">
<div id="btnLogout" data-dojo-type="dijit/MenuItem" data-dojo-props="">Salir</div>
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'left'" style="width: 15%;" id="leftPane">
<div data-dojo-type="dijit/layout/ContentPane">
<input id="agentFilter">
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="peopleTreePane" style="height: 90%">
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">
<div id="appCenterTabContainer" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="splitter:true, region:'center'">
<div data-dojo-type="dojox/layout/ContentPane" title="Visitas" href="" id="visitasPanel">
<div>
<button data-dojo-type="dijit/form/Button"
data-dojo-props="iconClass:'dijitIconTask', onClick:function(){ console.debug('clicked simple') }">
Simple
</button>
</div>
</div>
<div data-dojo-type="dojox/layout/ContentPane" title="Logs" href="" id="logsPanel">
<div id="gridLogs" class="appGrid" style="height: 20em;"></div>
</div>
</div>
</div>
</div>
</body>
Thanks
It looks like the empty href attribute on your ContentPane is confusing Dojo's parser. You don't need that attribute unless you want the ContentPane to load its content from the server.
<div data-dojo-type="dojox/layout/ContentPane" title="Visitas" href="" id="visitasPanel">
<!-- ^ remove this -->
you are just missing height style property for borderContainer widget.
Cheers,
kiuma
I'm practicing my javascript with others trying to basically make my text underneath my picture appear and disappear when I click on the picture. I've been using toggle from JQuery but am not having any luck in getting my text to disappear or appear. What am I missing? Or what should I add! Thanks lots...and here comes the code:
<link rel="stylesheet" type="text/css" href="something_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</head>
<script>
$(document).ready(function(){
$("#col1").click(function(){
$('p').toggle();
});
});
</script>
<body>
<div id="wrapper">
<div id="outerWrapper">
<div id="header"><img src="http://ncadpostgraduate.com/images/site/header.gif" alt="NCAD Postgraduate Study" width="366" height="66" /></div>
<div id="topNavigation">
</div></div>
</div><div id="wrapper-3">
<div id="outerWrapper">
<div id="contentWrapperhome">
<div id="col1"><a><img src="image/DSC04580.JPG" alt="NCAD Entrance" width="251" height="251" /></a>
<div id="text">
<h1>Postgraduate Study</h1>
<p>This is me isn't it?</p>
</div>
</div>
<div id="col1"><a><img src="image/DSC04580.JPG" alt="Prospectus Image" width="251" height="251" />
</a><div id="text">
<h1><a>Prospectus</a></h1>
<p><a>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</a></p>
</div></div>
<div id="col1"><a><img src="image/DSC04580.JPG" alt="Graduate Work Image" width="251" height="251">
</a><div id="text">
You shouldn't have more than one element per ID, you have several with id=col1 change that to classes or make them individual for starters. Good thing about using classes is that you can attach one listener to many elements. Then toggle the p under that or this by limiting your selector.
HTML:
<div id="header"><img src="http://ncadpostgraduate.com/images/site/header.gif" alt="NCAD Postgraduate Study" width="366" height="66" />
</div>
<div id="topNavigation"></div>
</div>
</div>
<div id="wrapper-3">
<div id="outerWrapper">
<div id="contentWrapperhome">
<div class="clickToHideClass"><a><img src="image/DSC04580.JPG" alt="NCAD Entrance" width="251" height="251" /></a>
<div id="text">
<h1>Postgraduate Study</h1>
<p>This is me isn't it?
</p>
</div>
</div>
<div class="clickToHideClass"><a><img src="image/DSC04580.JPG" alt="Prospectus Image" width="251" height="251" />
</a>
<div id="text">
<h1><a>Prospectus</a></h1>
<p><a>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</a>
</p>
</div>
</div>
<div class="clickToHideClass"><a><img src="image/DSC04580.JPG" alt="Graduate Work Image" width="251" height="251">
</a>
<div id="text">
<h1><a>Prospectus</a></h1>
<p><a>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</a>
</p>
</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$(".clickToHideClass").click(function () {
// now toggle only the 'p' under 'this'
$('p', $(this)).toggle();
});
});
and working Demo here: http://jsfiddle.net/EuJB6/
Close script tag so it must working
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#col1").click(function () {
$('p').toggle();
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="outerWrapper">
<div id="header"><img src="http://ncadpostgraduate.com/images/site/header.gif" alt="NCAD Postgraduate Study" width="366" height="66" /></div>
<div id="topNavigation">
</div>
</div>
</div><div id="wrapper-3">
<div id="outerWrapper">
<div id="contentWrapperhome">
<div id="col1">
<a><img src="image/DSC04580.JPG" alt="NCAD Entrance" width="251" height="251" /></a>
<div id="text">
<h1>Postgraduate Study</h1>
<p>This is me isn't it?</p>
</div>
</div>
<div id="col1">
<a>
<img src="image/DSC04580.JPG" alt="Prospectus Image" width="251" height="251" />
</a><div id="text">
<h1><a>Prospectus</a></h1>
<p><a>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</a></p>
</div>
</div>
<div id="col1">
<a>
<img src="image/DSC04580.JPG" alt="Graduate Work Image" width="251" height="251">
</a><div id="text">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
First of all your HTML needed tidying up. Ensure you close the </head> and place your Javascript in the <head>. ie
<head>
<link rel="stylesheet" type="text/css" href="something_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// do summit
});
</script>
Also the <body> html needed tidying up ie:
<div class="col"><img src="image/DSC04580.JPG" alt="Prospectus Image" width="251" height="251" /></div>
<div class="text">
<h1>Prospectus</h1>
<p>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</p>
</div>
<div class="col"><img src="image/DSC04580.JPG" alt="Graduate Work Image" width="251" height="251"></div>
<div class="text">
<h1>Other text</h1>
<p>Read the full Postgraduate prospectus for 2009/2010 online, including details regarding Application deadlines and procedures. The Prospectus is also available as a PDF download.</p>
</div>
Note how the ID are replaced with class. IDs should be unique. Finally the Javascript needed amending as follows:
<script>
$(document).ready(function(){
$('.col').click(function(){
$(this).next('.text').toggle();
});
});
</script>
This now uses the classes col and text and makes use of $(this).next() to only toggle the next occurrence of a element of class text.