<script type="text/javascript">
$(document).ready(function() {
ListUsers=function(em){
var emid = em.title;
$('.userslistdiv').text('id-' + emid);
$('.userslistdiv').show;
//alert("it worked-" + emid);
};
});
</script>
<div id="userslistdiv">xxxxxxxxx</div>
I'm not getting the changes to the div content. I get the alert if I uncomment it. I changed .show to .hide (since the div initially shows) and it does not "hide".
You have an id for the div, so need to use id selector(prefix #) not class selector(prefix .), also show is a method so you need to invoke it(add () at the end)
$(document).ready(function() {
ListUsers=function(em){
var emid = em.title;
$('#userslistdiv').text('id-' + emid);
$('#userslistdiv').show();
//alert("it worked-" + emid);
// both these can be combined to
//$('#userslistdiv').text('id-' + emid).show()
};
});
Change $('.userslistdiv').show; to $('.userslistdiv').show(); Add the parentheses.
Also, the DIV has an ID that's "userslistdiv"
Your code
$('.userslistdiv').text('id-' + emid);
$('.userslistdiv').show;
is attempting to find the class name.
Use this instead:
$('#userslistdiv').text('id-' + emid);
$('#userslistdiv').show();
Try:
<script type="text/javascript">
$(document).ready(function() {
ListUsers=function(em){
var emid = em.title;
$('#userslistdiv').text('id-' + emid);
//$('#userslistdiv').show();
//alert("it worked-" + emid);
};
});
</script>
<div id="userslistdiv">xxxxxxxxx</div>
For id use # for class use ..
Also, don't use show() unless the div is hidden.
You're referencing the element by id, not class, so
$('.userslistdiv')
should be
$('#userslistdiv')
and unrelated to the question, but please put a "var" in front of the variable when declaring it. This keeps it from polluting the global namespace.
Try this:
$(document).ready(function() {
$('#userslistdiv').text('it worked!');
});
Related
This statement will look for the div #content-company and load the appropriate data when it finds it. However my problem is:
On this occasion I have to use a slider that I can't rename to the same as the div so in this instance I have an additional called .slides
I normally would do this:
// JavaScript Document
$(function(){
$('.tileSB').click(function(e){
e.preventDefault();
var url = $(this).attr('href') + ' #' + $(this).attr('data-target');
$('#content-company, .slides').load(url);
});
});
But that simply overlays both the content associated with the div and the slides class so you have them with the same name at the same time and I don't want that.
Can someone explain how I can have this?:
// JavaScript Document
$(function(){
$('.tileSB').click(function(e){
e.preventDefault();
var url = $(this).attr('href') + ' #' + $(this).attr('data-target');
$('#content-company OR .slides').load(url);
});
});
Thanks in advance
You can check if the #content-company element exists. If it doesn't you can use .slides instead. Something like this:
$('.tileSB').click(function(e){
e.preventDefault();
var url = $(this).attr('href') + ' #' + $(this).attr('data-target');
var $target = $('#content-company');
if (!$target.length)
$target = $('.slides');
$target.load(url);
});
You can use ? :(ternary operator). The code below will use the #content-company, if it existst otherwise uses .slides.
var $selector = $('#content-company').length ? $('#content-company') : $('.slides');
$selector.load(url);
You can simply use this:
$("#content-company, .slides").first()
Note that first element is determined according to HTML order. If more than one matching elements are found then the first one in HTML order is returned.
Using JavaScript and JQuery and underscore
Currently I have the following
<div id="select"></div>
which is populated by the following code
$(document).ready(function () {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function (e) {
$(this).width(100).height(100).appendTo('#select');
So at the moment only the img is taken and placed inside #select, but I would also like for it to include item.A item.C and item.C
But I'm not sure how to change the $(document).ready(function () { code block to achieve this?
I thought I might need to give the div an id and reference that?
I've been able to take the whole lot by concatenating the code block, but thats not how I want it to work, I'd like each element seperate so that I can target it with CSS.
_.each(Badges, function (item) {
var wrapper = $('<div class="wrapper"></div>');
wrapper.append('<img class="images BadgeImgOutline responsive-image" src="' + item.imageURL + '" />');
wrapper.append('<div>' + item.A + '</div>');
wrapper.append('<div>' + item.B + '</div>');
wrapper.append('<div>' + item.C + '</div>');
$('#container').append(wrapper);
});
You could use jQuerys ".parent()" method to get the parent of the img tag - in this case your wrapper div and add this to your select.
The code could look like so:
$(this).width(100).height(100);
$(this).parent().appendTo('#select');
for shrinking the image and appending the whole wrapper including img and items to your select.
Hope this helps
I need a little help with the JS for this show/hide function
Essentially in the site there is PHP loop which echos out the HTML code below X-number of times.
I needed some JS to allow me to target each individual instance with a show/hide function, unfortunately my knowledge of JavaScript is low - I had some assistance from a developer with the code below but I seem to have gone wrong somewhere down the line as the console returns this error message "Uncaught SyntaxError: Unexpected identifier"
Any insight or help into this will be much appreciated!
Thanks in advance
The HTML
<span class="contentShow" >Dropdown Text Here...</span>
<a id="prod_more_trigger" ><span>More...</span></a>
The JS
<script type="text/javascript">
$(document).ready(function()
{
var i = 0;
$(document).find('span.contentShow').each(function() {
$(this).attr('data-id', i++);
$('span.contentShow').hide();
});
i = 0;
$(document).find('a.prod_more_trigger').each(function() {
$(this).attr('data-id', i++);
$(this).click(function() {
var $span = $(document).find('span.content[data-id="' + $(this).attr('data-id) + "]');
$('span.contentShow').toggle('fast');
});
});
});
</script>
You are missing couple of quotes in this line below
find('span.content[data-id="' + $(this).attr('data-id) + "]');
supposed to be
find('span.content[data-id="' + $(this).attr('data-id') + '"]');
^ ^
| |
Missing the closing quote
Also your anchor looks like this
<a id="prod_more_trigger">
Supposed to be
<a class="prod_more_trigger">
Since you are using class selector in your JS
You need not create a local variable i to assign a value. $.each passes a index. And you do not need to nest the event handler inside the $.each loop
Code
$(document).ready(function () {
// Cache your selectors when using multiple times
var $content = $('span.contentShow'),
$trigger = $('a.prod_more_trigger');
$content.each(function (i) {
$(this).attr('data-id', i);
});
// This can be outside the loop
$content.hide();
$trigger.each(function (i) {
$(this).attr('data-id', i);
});
$trigger.click(function () {
var $span = $('span.content[data-id="' + $(this).attr('data-id') + '"]');
$content.toggle('fast');
});
});
Check Fiddle
On your code you specified prod_more_trigger as id, it should be class
HTML
<span class="contentShow" >Dropdown Text Here...</span>
<a class="prod_more_trigger" ><span>More...</span></a>
I have placed a div on top of image. On click event of div I am removing the div and then applying CSS to the image, but CSS is not getting applied .. below is the code
$('#one').live('click', function() {
$('#one').remove();
var selglobe= $('#' + globe);
selglobe.addClass('abc');
selglobe.css("border","double");
});
tried this,
HTML code:
$('#one').live('click', function() {
$('#one').remove();
console.log('HTML Globe value is ' + globe);
flipIt(this);
});
JQUERY:
function flipIt(obj){
if(status==1 )
{
alert('If'+globe);
console.log('JS Globe Value is'+globe);
var $selglobe = $('#' + globe);
$('#id11').addClass('imgnew');
$('#id12').addClass('transition');
$selglobe.addClass('anam');
$selglobe.css("border", "double");
$selglobe.css("border-color", "yellow");
}
Have a look at this jsFiddle provided by the comments:
http://jsfiddle.net/jF4mh
Check your jquery version. You are using 'live' function which has been removed from jquery 1.9. That might be the issue.
Where are you defining globe?
Anyway I would be using the on click, and just removing the element at the end.
$('#one').on('click', function() {
$('#one').remove();
var selglobe= $('#' + globe);
selglobe.addClass('abc');
selglobe.css("border","double");
});
The answer is below
I'm just starting to get into JQuery but I don't if I'm just slow understanding or stupid....
Let's say I wanna make a function where all my li objects... when you do a mouseover it gets the class name of the corresponding li element, and declaring a variable inside of it to keep that name, well my question is... how can I edit it with .css method and make a simple image swap ( image which is find through the class)
$("li")
.mouseover(function() {
var $myClass = $(this).attr("class");
var src = $($myClass).find('img').attr("src").match(/[^\.]+/) + "_over.png";
$("img"+ myClass).attr("src", src);
$($myClass).css("background-color", "#fff");
})
I don't know why it's not working, i'm guessing it's because my variable only display the name and not the actual name to edit it with jquery, I mean I don't know if it's adding the "." or "#" depending if it's a div or class for the code syntax, but I have no idea how to add that "." to the variable... or maybe it's because of my nested rules with my li objects, I mean to specifically refer to my li objects is:
#nav li
And yeah I know I'm telling solutions but I can't make em work :S
Anyone can help me?
**I did it haha! (What I was trying to do is change an <image> (with generic name) and class properties inside of a specific li object, knowing that li through their class when user triggers mouse over)
I'm just adding the code if anyone find this question helpful**.
$("li")
.mouseover(function() {
var $myClass = $(this).attr("class");
$myClass = "." + $myClass + " a";
var src = $($myClass).find('img').attr("src").match(/[^\.]+/) + "_over.png";
$myImg = $myClass + " img";
$($myImg).attr("src", src);
$($myClass).css("color", "#fff");
})
.mouseout(function() {
var $myClass = $(this).attr("class")
$myClass = "." + $myClass + " a";
var src = $($myClass).find('img').attr("src").replace("_over", "");
$myImg = $myClass + " img";
$($myImg).attr("src", src);
$($myClass).css("color", "#E3C922");
});
You can just do this in css:
.yourClass{
background: url(/path/image.jpg);
}
.yourClass:hover{
background: url(/path/image_over.jpg);
}
unless you have individual images for each li. Then you may want to clarify your needs so I can update this to a more useful answer.
just in case...
$("li")
.mouseover(function() {
var src = $(this).find('img').attr("src").match(/[^\.]+/) + "_over.png";
$(this).find("img").attr("src", src);
$(this).css("background-color", "#fff");
})
there's no reason to declare the myCLass var when you're within scope of that object alone. So you add the over state, then change the src of the img found and the li's background color.
An easy way to do this is to have one css class for the "li" element when it is not being hovered over and then another css class for when it is being hovered over with the background image set to whatever you want.
Then, in your jQuery you would use the removeClass() function and the addClass() function. The addClass() function would add the class with your hovered image.
Are you looking to change the class on mouse over?
$(li).mouseover(function{$(this).addClass("whatever");});
$(li).mouseout(function{$(this).removeClass("whatever");});
you can also use toggleClass() method
You can use the $varname method for variable declaration var keyword