Get dynamic text from selected object - (by ID and "active" class) - jQuery - javascript

My main mission: Is to get the text of the next and the previous objects to the chosen object - To display the image (and its titles) Previous & Next.
Before that I have a problem: to get text of a selected object, from an index to a variable.
The problem: Every time I pick a random object, the variable does not change but the text is added to the existing text in the index.
I made a DEMO, would appreciate your help.
$(document).ready(function hintProject(){
$('#nextProject, #prevProject').click(function(){
subtitle = null;
subtitle = $('#client-sub.active').justtext();
$('#next_target_title').text(subtitle);
alert (' text::: ' + subtitle );
});
});

It looks like jQuery simply can't find the objects you're specifying. I don't think the problem is with the snippet in the question. I think the problem is with your document ready function.
To debug, try simplifying your problem by cutting out all of the additional complexity of the setup script and just set up an HTML page that is in the state you want. It's much easier to understand 1 problem than 2 or more.
Also, try simplifying how you're specifying an active item: a single class on the portfolio item would make your life easier. Then you can specify css and such based on the parent instead of adding multiple classes to multiple things inside the each portfolio item.

Related

Need to expand multiple lines with javascript, text overflow

http://jsfiddle.net/10h8t3ah/
function changeHeight(rowNum) {
document.getElementById("demo").style.height= "70px";
var fooBar = document.getElementById(rowNum);
fooBar.style.height = "100px";
}
What I am trying to accomplish here is to pass through a variable defined as row1, row2, row3, and row4 as rowNum and it will change the height of both the link and the paragraph with the corresponding row#.
I am trying to pass the ID of both the paragraph and the link so that if you hover over the link and vice versa, the height will change.
Essentially, if you hover over either the link or the paragraph, the corresponding containers side by side of each other will expand in height and the text in the paragraph will be visible. The paragraph text I have set with wrap-text property of break word but it seems to just overflow out anyway.
OK - there are couple of concepts that need to be corrected to understand why this is not working:
the id of a DOM object must be unique (your jsfiddle uses the same ID on both of your "rows" - I've updated your code to use a class instead of an id so that)
the parameter you are passing to your changeHeight function must be a string (if you pass row1, then row1 must be a defined variable, instead you should pass 'row1' -- again, see my updated fiddle code)
Here is a jsfiddle that does most of what you want, I think : http://jsfiddle.net/zwyr4hn1/10/
There were also a couple of little things that I've fixed up:
1. you need to return the other rows back to the smaller size when a new one is hovered (I've used the class row on all the row objects to do this ) 2. this css is needed to get your a objects to resize in the way you want : a { display: inline-block; }
I haven't addressed the wrap-text issue you mentioned because I didn't see that on the jsfiddle.
Instead of designing the complex JavaScript functions on your own, ust use accordion to expand the contents. Here's the Bootstrap framework accordions, especially designed for these purposes.
Link to page where you can learn more about it.
http://www.w3schools.com/bootstrap/bootstrap_collapse.asp

jQuery -Wildcard Selector Starts w/String and ends w/Variable

I've been looking all over the web for an example or solution, but have not been successful yet. The challenge I am facing is using jQuery to select an element ID that starts with a string, but also ends with a variable passed in by a function.
Example:
.JSP file - There is a ForEach loop that creates dynamic divs and adds a variable ${number} to their 'id' as a key. This allows a button to show/hide only that unique div without impacting other divs on the same page.
<div id="success-icon${number}"></div>
<div id="success-msg${number}"><p>My Message</p></div>
<button id="success-btn${number}" onclick="showIcon(${number})">Show Button ${number}</button>
.JS file
//does not work, because it is looking for success+number
function showIcon(number){
$('[id^=success]'+number).show();
}
I need it to look for an id that starts with "success" and ends with "number" variable.
Would really appreciate any help on this and thanks in advance for your time!
You can use as selector:
$('[id^=success][id$='+number+']').show();
But beware, would match for number = 1; both divs with IDs: success-icon1 and e.g success-icon11. Now that's depend your expected behaviour.
Anyway, to 'group' some elements, you would have better to use a common class specific to each grouped element.

jQuery refer to files in folders

$(function () {
$(".links2lvl a").click(function () {
var page = this.hash.substr(1); /*in case of first link - works*/
/* var page = this.hash.substr(7); in case of second link - nope.jpg*/
$.get(page + ".php", function (gotHTML) {
$("#content").html(gotHTML);
});
});
});
<section class="tabs">
<ul class="links1lvl">
<li><a>About</a>
<ul class="links2lvl">
<li>Us</li>
<li>Personal</li>
So here I have two two sets of code. First is jQuery function, which extracts given PHP file and it's contents are shown in div with id="content".
The other is my 2 level list. In the second level you can see pages I'm trying refer to. The first link works just fine, jQuery successfully extracts the content and shows it given plave, but the second link in the folder about/ thats another story, the function doesn't seem to find it. The question is, how do I refer to .whatever from another file?
Most of the problems I see in code are based on attempts to solve challenges by adding more challenges to the code. :)
I would give a suggestion and I hope you don't mind: I would solve it by adding a "data-*" to each a tag to hold the reference you need to find using this.hash (or, maybe, use .each or .map) to loop through the elements and extract the proper URL to be used).
What happen is, this.hash will return "#who", but it is also a valid ID selector in jQuery (see more here). Hence this.hash will find "#who", but won't find "about/#personal" (because the hash element is not the first character of the string).
You could use string.split('#') to capture the string straight after the "#", then save it in - for instance -, the data-hash parameter at each a tag while constructing the HTML. Then it should be fairly easy to obtain the content needed for your application (once again, it is always about how to minimize challenges, instead of add them). ;)
Sadly I am no able to build a code sample now, but if you have difficulties following this idea, contact me and I will write a quick sample code for you.

Select image by default on page load

I have a JSON feed and I extract the values to populate a select menu with product sizes, colours/thumbnails, and get the values in an object, on submit.
What I need is to select an image by default, if its title is matching a value of a variable declared and initialised at the top (e.g. var initialColour = "Wheat";). So if initialColour is "Brown", the image with the title "Brown" should be selected by default and the sizes in the dropdown menu should reflect the selection.
This is what I am trying:
if(mainImg.attr('title') == initialColour) {
$(this).addClass("active");
}
This is on line 27 on jsfiddle link below.
JSFIDDLE COMPLETE DEMO
p.s. I would also appreciate any hints with regards the structure, I know its a mess.
Is this fiddle does what you want?
I changed some code in two places, I left the original lines there as a reference.
Basically, I assigned the image directly to mainImg. Then use that when adding the class too. Also, you missed a couple of 's in the image html here:
$("<img src="+constructImageURL(mainImgID)+" id="+mainImgID+" class='colourThumb' title="+colour+" data-value='"+colour+"'> ")
Part of the issue is that you're trying to set the active thumbnail within the for loop, when instead, a JQuery attribute selector can be used:
$("#colourId .colourThumb[title='"+initialColour+"']").each(function() {
$(this).addClass("active");
});
I've updated the original Fiddle showing that once all dynamic elements have been created, the statement above will do the trick. (Line 87)
In terms of style, it may be worth looking at one of the data binding/templating frameworks (e.g. KnockoutJS) which will make things a lot clearer in the code. There's a learning curve, but it is worth it for what you're doing.

Whats make different in below Jquery code?

I'm working with on developing one of the social networking site and its having some notification features in left panel.
Whenever any user have played a game it will automatically change the number of notification count.
For that i have using below code line.
jQuery('#count_id').load('mypage.php');
But it will retrieve me whole site content with header,footer and content area in the response text, which is wrong as per my requirements.
but if i used below code of line
jQuery('#count_id').load('mypage.php #count_id');
then it will retrieve me a real count but add another div in between the original,
Original html:
<div id="count_id" class="notify">2</div>
and Code after retrieving response:
<div id="count_id" class="notify">
<div id="count_id" class="notify">1</div>
</div>
which is also not as expected. count are right but i don't want to add new div inside a original one.
What should i need to change in my code?
Thanks.
jQuery('#count_id').load('mypage.php #count_id > *');
That would bring only the DOM childs (the content)
Because this is how it works. Also it enables you to attach events to the element you load and delegate them inside this element (so new elements can also benefit from attached JavaScript events) - see .delegate().
If you want to replace the element, you can try the following:
jQuery.get('mypage.php', function(data){
jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');
I did not test it, but it should work.
Ivan Castellanos is however right. According to the documentation, you can provide any selector after the first space in the .load()'s parameter.
To retrieve count_id, you can directly get the html value in the div like this:
<script type='text/javascript'>
jQuery(document).ready(function()
{
countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
countVal = parseInt(countVal); //This will convert the string to type integer
});
</script>
Note:
If you want increase the count and update the div value, you can add the following lines:
countVal++;
$("#count_id").html(countVal);

Categories