Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I load a web page from the internet (say www.google.com or whatever). This page is written in HTML. Suppose in this code there is this fragment.
<ul class="CLASS">
<li>
<div class="DIV1"></div>
</li> //Hide this li
<li>
<div class="DIV2"></div>
</li>
<li>
<div class="DIV3"></div>
</li>
</ul>
I want to know if there is a way to hide the section (the li section) that I mention in the previous code ("Hide this li") as soon as I load the page. In my screen, I don't want to execute the section li that I mention.
I did some research and I think that the Firefox extension Greasemonkey does it. What will be the script to add to do this ? Or, there is a different way (without Greasemonkey).
It's not possible using only html and css. I would do it using javascript and a library (I use jQuery):
$(document).ready(function() {
$('li a[href=SOMETHING1]').parent().hide();
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
i am trying t get the closest iframe element to a parent element so can identify the iframe that i want to stylize with css:
<div class ="accroche">
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
</div>
What would be the best technique knowing that the iframes are generated by another tool and there is no way to identify them
Well if I understand your problem it’s the first element of the list so you can do something like that in your css to style it :
.accroche iframe:first-child{ … }
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
When I open some web-pages such as Youtube, I see the gray parts which would mean that it is loading data.
How can I make this kind of effect when building a web-page? Just answering in general is enough! Thank you.
Youtube render page
YouTube is a "single page application", when you open it the video data is not fetched yet with the page. that when you see the gray parts and you can style them like here.
After fetching the data of the videos they hide the loading part then showing the real video elements.
For example:
<div class="loading">
<!-- Loading elements -->
</div>
<div class="videos" style="display: none">
<!-- The display will change the the is fetched from the server -->
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I would like to implement this type of behaviour:
on the left side of the page, there is a navigation with links, and on the right side of the page there is a blank div. When user clicks on link, content on the right changes. Same should happen with all other links.
My question would be, what is the best way to achieve this? I was thinking about JQuery tabs, and just style tab's title to look like a link, but there is a gap between these two divs, so I guess it is impossible.
You don't need to use jQuery tabs for that.
Take in mind, that SF isn't a source of scripts, so, you should try something before and post your doubt after with some code to be analysed for whose maybe will help you.
You have many alternatives to do that, but, based in what you said. I undestood that you want do it only with javascript, right?
So, you can use jQuery like this to achieve that.
jquery
$(document).ready(function(){
$('#left-side a').click(function(e){
e.preventDefault();
$.ajax({url: $(this).data('target'), dataType: 'html', success: function(result){
$("#right-side").html(result);
}});
return false;
});
});
html:
<div id='left-side'>
<ul>
<li><a href='#' data-target='aa.html'>Page 1</a></li>
<li><a href='#' data-target='page2.html'>Page 2</a></li>
<li><a href='#' data-target='page2.html'>Page 2</a></li>
</ul>
</div>
<div id='right-side'>
</div>
Every time you click on some link, this script will load the defined page with ajax. I suggest you to use server side to achieve this, but, this also works.
Hope it helps you.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a list of links that are by default sorted alphabetically. For example
<ul>
<li>Aeroplanes</li>
<li>Books</li>
<li>Cars</li>
<li>Diggers</li>
</ul>
This list is auto generated and in real life about has about 30 links, how can I easily order these with little overhead using javascript/jquery. The order will be changing often to boost categories depending on season/popularity a number of other deciding factors.
TinySort is a small script that sorts HTMLElements. It sorts by text- or attribute value, or by that of one of it's children. The examples below should help getting you on your way.
This doesn't use jQuery and it is fast in performance.
TinySort used to be a jQuery plugin but was rewritten to remove the jQuery dependency. It is now smaller and faster (and has no dependencies). Functionality is the same but changes have been made to the parameters and options.
Just use this way:
tinysort (NodeList);
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.1.1/tinysort.min.js"></script>
<ul>
<li>Aeroplanes</li>
<li>Cars</li>
<li>Books</li>
<li>Diggers</li>
</ul>
<script>
tinysort('ul>li');
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
<div id='layer1'></div>
<div id='layer2'></div>
<div id='layer3'></div>
I have 3 divs, I want those div can be draggable and adjust the layer like photoshop changing layers.
ex. When user grab layer1 and place between layer3 & layer2 (mouse up).
Anyone know how to achieve this?
Try using Sortable from jQuery UI.
Basically you need to have a structure like this:
<ul class="sortable-list">
...
<li>...</li>
...
</ul>
And then in your jQuery code, just call:
$('.sortable-list').sortable();