Где есть кнопочка для сворачивания фреймов?

Question

[Толя Иванов]

На каком-то из сайтов я видел фреймы и кнопочку для открывания-закрывания фреймов, у меня сейчас тоже простой сайтик из двух фреймов, я хочу прикрутить кнопочку открыть-закрыть к нему. Пытался гуглить, но не нашел, помогите пожалуйста сделать такую кнопочку, чтобы фрейм или показывался или скрывался.
Вот нарисовал примерно действия кнопоки:

Answer 1

[Mr_Smitt]

Как еще один вариант, запилил на дивах, так как frameset (раз вы пишите фреймы и опираясь на вашу сетку) на jsfiddle не запихнуть

iframe фариант

<div class="wrapper">
    <div class="inner">
        <div class="frame sidebar">
            <iframe src="http://toster.ru/q/145330">
                Ваш браузер не поддерживает плавающие фреймы!
            </iframe>
        </div>
        <div class="frame content">
            <span class="toggle">&times;</span>
            <iframe src="http://toster.ru/q/145330">
                Ваш браузер не поддерживает плавающие фреймы!
            </iframe>
        </div>
    </div>
</div>

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}
iframe {
    display: block;
    border: none;
}
.wrapper {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}
.wrapper .inner {
    width: 100%;
    display: table-row;
}
.wrapper .inner .frame {
    display: table-cell;
    position: relative;
    height: 100%
}
.wrapper .inner .frame iframe {
    position: relative;
    height: 100%;
    width: 100%;
    border: none;
}
.wrapper .inner .frame.sidebar {
    width: 200px;
    background-color: #ff0000;
    overflow: hidden;
}
.wrapper .inner .frame.sidebar.hide {
    display: none;
}
.wrapper .inner .frame.content {
    background-color: #ffff00
}
.toggle {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    display: inline-block;
    color: #ffffff;
    background-color: #0000ff;
    cursor: pointer;
}

$(document).ready(function(){
    $(".toggle").on("click", function(){
        $(".sidebar").toggleClass("hide");
    });
});

Comments

[Толя Иванов]

у меня два фрейма, я дивы не могу использовать, именно фреймовый контейнер нужен, в главном index.html есть два iframe



надо менять witdth: 15% на 1-2% и обратно, это все в index.html должно быть прописано, чтобы поверх всего работало.

[Толя Иванов]

ой код съелся

[Mr_Smitt]

jsfiddle.net/zaf1wjxL/1 не вижу никакой проблемы в использовании div, нужно только додумать

[Толя Иванов]

как сохранить сайт с jsfiddle? не сохраняет джава скрипт почемуто, надо из кода выдирать, не хватает строчки $(window).load(function(){

все идеально подходит, только отступ от окна браузера надо убрать, чтобы конопчка касалась окна браузера padding 0 насколько я знаю.

[Mr_Smitt]

@poleteli-poleteli: "как сохранить сайт с jsfiddle?" вы о чем вообще? Какой сайт? Вам нужно скопировать написанный мною код из 3 полей html, css и js. Пожалуй обновлю ответ на вопрос и напишу нужный код

[Толя Иванов]

дело в том что когда я копирую javascript с jsfiddle то он почему-то не работает, не хватает какой-то строчки и я пытаюсь из браузера выдернуть строчку.

[Mr_Smitt]

@poleteli-poleteli: Вы наверное не подключили jquery

[Mr_Smitt]

@Mr_Smitt: https://code.jquery.com/jquery-2.1.1.min.js

[Толя Иванов]

вот так делаю, но кнопочка не работает https://www.dropbox.com/s/a9r383yvf61luhr/Screensh...

[Толя Иванов]

Разобрался! Все заработало :) действительно библиотеки не хватало

[Толя Иванов]

а можно еще маленький вопросик, у меня есть этот фрейм, я хочу в бокой менюшке сделать строчку и чтобы люди могли писать свой URL и нажимать GO и сайт открывался у них в главном фрейме. Не хочу чтобы они покидали сайт, а могли посмотреть свои сайты через мой сайт, а затем вернуться. Это такая маленькая фишка :)

Answer 2

[A K]

Как вариант

Comments

[Толя Иванов]

именно так, но только с двумя фреймами. Как бы динамически менять их width: 100px

[A K]

Так Вы не можете настроить скрипт под себя? Подставьте: width:100px и вместо контента iframe jsfiddle.net/Symphony/3n2eyw8e/1

[Толя Иванов]

с фреймами тоже работает? сейчас посмотрим :) да я не так опытен, раньше html,css занимался, сейчас давно в 3д ушел, могу только редактировать html,css

[Толя Иванов]

я пытался рыть, но что-то не выходит, посмотрите мой хтмл: pastebin.com/8Vf5ZrU9 хочу чтоб была кнопочка и слой контента растягивался. И еще обступов чтоб не было у фреймов, сейчас они как будто имеют отстп от окна браузера. Помогите, очень нравится идея.