The Student Room Group

Quick question regarding HTML and javascript.

i looked online and couldnt find an answer,

basically i have the code below:

if($("#favourite1":wink:.is(":checked":wink:){
$("#favouritecontent":wink:.append("":wink:;
}

in the append i would like to add the following code:


<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>


how do i go about doing this?
(edited 6 years ago)
any idea @UWS ?


cheers mate
Reply 2
Would be easier to hide and show the list, rather than add it programmatically.
Original post by IWMTom
Would be easier to hide and show the list, rather than add it programmatically.


i am working in jquery mobile and this is the only way to do it i think?

i have a favourites page, when a user clicks the favourite button for a specific item, i want to show a list view on a different page, but i dont know how to add html code into the append function
Reply 4
Original post by study beats
i am working in jquery mobile and this is the only way to do it i think?

i have a favourites page, when a user clicks the favourite button for a specific item, i want to show a list view on a different page, but i dont know how to add html code into the append function


Write the markup where you want it to be, and set it to display: none. You can then show and hide the element.
Original post by IWMTom
Write the markup where you want it to be, and set it to display: none. You can then show and hide the element.


can you please show me in code language example how it would be done please? i am not that good at javascript.

thanks
Reply 6
Original post by study beats
can you please show me in code language example how it would be done please? i am not that good at javascript.

thanks


Using the .show() and .hide() functions...
Reply 7
Original post by study beats
any idea @UWS ?


cheers mate




This looks more like jQuery than Javascript and I've like 0 knowledge in jQuery I'm afraid
(edited 6 years ago)
Original post by IWMTom
Using the .show() and .hide() functions...


so for example if i have the following code below :

<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>



how would i have that initially hidden?

and then how would i show it in the append function?
Reply 9
Original post by study beats
so for example if i have the following code below :

<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>



how would i have that initially hidden?

and then how would i show it in the append function?


Give the list an ID.
Apply display: none as a style.
Don't use .append() - use .show() instead.
Original post by IWMTom
Give the list an ID.
Apply display: none as a style.
Don't use .append() - use .show() instead.



ok i have given it an id and i have set it to display:none.

at the moment its not showing up

so what do i need to put after .show() ? what goes inside the brackets?
Original post by UWS
This looks more like jQuery than Javascript and I've like 0 knowledge in jQuery I'm afraid


its ok mate
Reply 12
Original post by study beats
ok i have given it an id and i have set it to display:none.

at the moment its not showing up

so what do i need to put after .show() ? what goes inside the brackets?


Nothing, by default. Call the function on the element, it is as simple as that. The documentation for jQuery is pretty good if you need further clarification.
Original post by IWMTom
Nothing, by default. Call the function on the element, it is as simple as that. The documentation for jQuery is pretty good if you need further clarification.



document.getElementById('div1':wink:.style.display = 'block';

do you mean using something like above?


i used that.

when i press the checkbox button it shows up

however when i untick the check box , it still says there and does not remove?
Reply 14
Original post by study beats

document.getElementById('div1':wink:.style.display = 'block';

do you mean using something like above?


i used that.

when i press the checkbox button it shows up

however when i untick the check box , it still says there and does not remove?


You're using jQuery, so just use the DOM selector like you were when using append...

You'll need to do the inverse using hide() to get it to go away again.
Original post by IWMTom
You're using jQuery, so just use the DOM selector like you were when using append...

You'll need to do the inverse using hide() to get it to go away again.


query selector doesnt work either....

append works the best as when i uncheck it, the item also removes

any idea how to put html code or a div inside the append function ??
Reply 16
Original post by study beats
query selector doesnt work either....

append works the best as when i uncheck it, the item also removes

any idea how to put html code or a div inside the append function ??


You should be using documentation to learn, but here's a JSFiddle of a working PoC: https://jsfiddle.net/z518f72u/
Original post by IWMTom
You should be using documentation to learn, but here's a JSFiddle of a working PoC: https://jsfiddle.net/z518f72u/


wow mate

thanks a lot

it finally worked

took up so many lines of code, had to copy and paste and change the variables for everything, but in the end i got my implementation to work

Quick Reply

Latest