I want to post an image of 2 DIVs, separated by a black line , the one on the left have 4 images and what I want is:
When I click on any of the buttons it will reveal a text in the right DIV and when I press another image it reveals, too, another text. I have no idea how I can do that, that's why I'm here asking for help.
If you have any ideas about the subject, like what I must use, or sources that you can find because I didn't find anything related.
I've searched about this in JavaScript revealing a text from a button, but nothing that could help me.
For your better understanding i will show you how is the final result, how it should look.
http://prntscr.com/7krf5h
Of course without the arrows pointing, and the image in the right div, it will disappear, i just need the text and show the text, but i think u understand the content.
It looks like you're trying to setup a slideshow of some sort. One way you can do it is to create two lists, a hidden one for the slide data and another visible one for the list of slides on the left-hand side. Then, you can grab the necessary data from the hidden list based on index. Here's an example fiddle that will highlight what I mean: http://jsfiddle.net/ethueuhj/1/ (in the fiddle, you can change the data-bg attribute to a computer background, tablet background, et al).
$(function() {
function setSlide(index) {
var slide = $('.slide-data li').eq(index);
$('.slide-container').css({ "background-image": "url('" + slide.data('bg') + "')" });
$('.slide-container').html(slide.html());
}
$('.slides li').click(function() {
setSlide($(this).index());
});
// Default slide
setSlide(0);
});
You need to use jquery in order to achieve what you want.
Also, you need to change the text of the div when you click on another div tag. For this, you need to user inner html.
Here is the sample code, you can try it.
$(document).ready(function(){
$("name_of_image_div_tag_here").click(function(){
alert("The image was clicked.");
document.getElementById("name_of_text_div_tag_here").innerHTML = "Sample text to display";
});
});
Related
I'm doing a project using Wikipedia API. Typing a word in seach bar displays a list of items. Like in the picture below.
When a user hover over "more" div an additional content is dispalyed below. like that.
However some items in blue color do not containany information, that is, empty. So i want for those items which do not contain any additional information do not show "more" div. So i have written a code. But unfortunately it does not work.
if ($('.list-container>div.titleDesc>p').is(':empty')) {
$(".show-more").hide();
}
Cannot figure out what is wrong so will appreciate any help. If you need more information please refer to my project in Codepen.
jQuery :empty() is a selector; hence, it works on jQuery elements. So, you need to update this line:
$(this).text().is(':empty')
With this line:
$(this).is(':empty')
Here is a Working Demo, I have just updated this JS line, and add a container div element.
You can use like this
$('.list-container>div.titleDesc>p').each(function() {
if ($(this). text() == "" ) {
$(this). hide() ;
}
} )
You need to use this code after printing searching results
So on load of document I hide all my description divs, then when hovering over I want the divs to display the text below, however its not allocating space for the text to be there. It gets stuck underneath my footer. However if I tried the invert aka, show it on start and hide it on hover it works perfectly as intended, making space when it reshows itself.
The main part of my code is here
http://www.hastebin.com/yilinademe.xml
http://gurucraft.co.uk/media.php If you look at the thumbnail lower on the page, when you hover over it, you see the title appear but the paragraph does not appear? Makes no sense. I'm assuming the paragraph is getting stuck under footer or something?
Use this :
$(document).ready(function() {
$(".view").hover(function() {
$(this).parent().children(".test").show();
});
$(".test").hide();
});
Update :
After looking at the code at your link I found that the the problem is due to one of the jQuery plugin used (isotope), To fix it use this :
$(document).ready(function() {
$(".view").hover(function() {
$(this).parent().children(".test").show();
$('.isotopeWrapper').isotope('reLayout');
});
$(".test").hide();
});
I'm trying to implement a switch/tracker to my HTML5 game.A short description of what I want jQuery to do for me: hide all div tags and show the ones I need (body, output, language, footer and a specific level f.i. Level 1 Once this has been shown, it needs to show the next level f.i. Level 2 on clicking a bottom.
But I don't know how to code this. So can anyone please help me?
So far I have written this:
jQuery('document').ready(function() {
function hideshow() {
$("div").hide(99999999);
$("#container").show(9999999);
$(".output").show(9999999);
$("#languages").show(9999999);
$("footer").show(999999);
$("#L1").show(999999);
};
});
It might be better practice to hide the div's with css, or even replacing the Level 1 with Level 2 content (ajax based for example).
If you cannot do that, give all level div's a class, and only hide those with
$('.level').hide(); $('#level1').show();
The way to make a function show something is to do
$('#level2').show();
Use the jQuery css method:
$("div").css("display", "none"); //for hiding
$("div").css("display", "block"); //for displaying
I'm working on designing an interactive university campus map and need some direction with what I am looking to do.
Link to page: http://www.torontoclassfind.com/startpage.html
I want to be able to click on the links in the top menu (only one link is active so far and it loads and Ajax page in lower left div) and have it swap the building image with a different image to show that it's been selected.
I could do that with the following:
$("#buildinglink1").click(function () {
$("#buildingimg1").attr("src","highlightedimage.gif")
})
Problem is I need to change back the image to it's default image once another menu link is clicked and a new building is selected.
The building images are located at www.torontoclassdfind.com/building/ and the highlighted images are located at www.torontoclassdfind.com/buildingc/ and the names for the buildings are the same in both locations.
I am thinking of using JQuery's .replace element to do this (ex: jquery remove part of url) which would remove or add the 'c' to the url, but I'm kind of lost from here.
Any tips? I think I need to make a function that would indicated a link is selected and somehow merge it with the .replace element.
Just a note: .replace is a JavaScript string (and others) method, not a jQuery method.
I think you're asking to do something like this:
$(".any-building").click(function () {
//replace all building sources with the unhighlighted version
$(".any-building").attr('src', function () {
return $(this).attr('src').replace('buildingc', 'building');
});
//replace clicked image with highlighted one
$(this).attr('src', $(this).attr('src').replace('building', 'buildingc'));
});
A possible downside is that with a lot of images this swap may take a long time or cause some flicker. If that's the case, then you may want to add a class .active to the highlighted image or something like that and only do the swap for that image and the newly clicked one.
A common learning mistake in jQuery is to focus on ID's for all types of selectors. They work great for very small number of elements however become very unwieldy fast for large groups of elements that can easily be managed by simpler code methods.
You want to be able to write far more universal code where one handler would cover all of your links that share the same functionality in the page .
Example:
var $mainImage=$('#mainImage')
var $buildingLinks=$('.buildingliststyle a').click(function(){
/* "this" is the link clicked*/
/* get index of this link in the whole collection of links*/
var index=$buildingLinks.index(this);
/* perhaps all the image urls are stored in an array*/
var imgUrl= imagesArray( index);
/* perhaps the image urls are stored in data attribute of link( easy to manage when link created server side)*/
var imgUrl=$(this).data('image');
/* store the current image on display (not clear how page is supposed to work)*/
var currImage=$mainImage.attr('src');
$mainImage.data('lastImage', currImage);/* can use this to reset in other parts of code*/
/* nw update main image*/
$mainImage.attr('src', imgUrl);
/* load ajax content for this link*/
$('#ajaxContainer').load( $(this).attr('href') );
/* avoid browser following link*/
return false;
});
/* button to reset main image from data we already stored*/
$('#imageResetButton').click(function(){
$mainImage.attr('src', $mainImage.data('lastImage') );
})
Can see that by working with groups of elements in one handler can do a lot with very little code and not needing to focus on ID
Code above mentions potentially storing image url in data attribute such as:
Building name
If you have a paragraph of normal text, you can click anywhere inside the text and drag your mouse to highlight it. However, if the text is inside an anchor/link tag, it won't allow you to click and drag -- the link catches the mouse and prevents it from happening.
To see what I mean, find a text link on this page and try to click inside it and drag to select it. It won't let you -- you'll have to click outside the link and drag around it.
What do you need to do in JavaScript/JQuery to temporarily disable the link long enough for you to drag and highlight it?
The reason I can't just start outside the link is because every word in the paragraph is within a hyperlink -- it's a video transcript and each link is synced to a segment in the video.
My first thought was to do something like this:
$("a").each(function() {
$(this).replaceWith("<span class='link' data-href='" + $(this).attr("href") + "'>" + $(this).text() + "</span>");
});
$(".link").click(function() {
window.location = $(this).data("href");
});
However, there may be a much better way of doing this. The code above converts all a elements into span elements, keeping the href attribute value, and then makes the span elements with class "link" function as links. You could style the span elements to look like a elements currently do on your page.
Here's an example of the above in action.
You could try this solution, loading the original text into variables and then restore them.
But that seems too messy. Sometimes a simpler solution is better.
Why not have two paragraphs and set visibiltiy='hidden' when the user clicks on a button to hide the paragraph with links and show the paragraph without links?
Page weight doesn't seem to be an issue, since you're anyway loading video.